GoogleMapにマーカーを表示する

昨日の続き。

地図を表示させただけじゃなくてマーカーを表示してみましょ。
地図を描くまではまったく一緒。
その後、google.maps.event.addDomListener内に

// マーカー表示する緯度経度を指定するLatLng型の変数作成
var pos = new google.maps.LatLng(xx.xxxxx, yy.yyyyy);

// そのポジションへマーカーを立てる一文
marker = new google.maps.Marker(
{
  position:pos, // マーカーを立てる位置
  map:map, // マーカーを表示するMapオブジェクト
  title:'ひゃっはー' //マーカーにマウスオーバーした時に表示される文字列
});

これでpositionの場所にデフォルトのマーカーが表示されます。
google.maps.Markerにはオプションがいっぱいあって

オプション名	型	説明
clickable	boolean	true の場合、マーカーはイベントイベントを受け取る。デフォルト値は trueなので普通は指定する必要なし。
cursor	string	マウスオーバー時に表示されるマウスのカーソル。
draggable	boolean	trueの場合、マーカーをドラッグ可。デフォルト値は false。
flat	boolean	true の場合、マーカーの影は表示されない。
icon	string,MarkerImage	前面のアイコン。Googleで用意されたアイコンや自前のアイコンも使える。（URL指定）
map	Map,StreetViewPanorama	マーカーを表示する地図。（必須）
positi6on	LatLng	マーカーの位置。（必須）
shadow	string,MarkerImage	影の画像。自前でも作成可能（URL指定）
shape	MarkerShape	ドラッグ/クリック用の画像マップの領域の定義。
title	string	マウスをマーカーにロールオーバーした時に表示されるテキスト。
visible	boolean	trueの場合、マーカーが表示。
zIndex	number	地図上のすべてのマーカーがzIndex順に表示されるが、デフォルトでは、緯度を基準に低緯度が手前で重なるのでデフォでおｋ。

マーカーを設置した後で、JavaScriptでオプションを変更することも可能。
setOptionsって関数がある。
ちなみにmapオブジェクトのオプション（縮尺や中心位置等）も変更できるので、Mapの外から何かのボタンをおすことで、Mapの見た目を変更したりマーカーの位置や見た目を変更することも可能。

次回は地図に複数のマーカーを置いてみよう。