好きな画像をマーカーとして表示させる

Google MAPS API V3 の google.maps.Marker で、既定のアイコンを使わずに独自の画像を表示させるサンプルプログラム。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map" style="width: 400px; height: 280px;"></div>
<script type="text/javascript">
// 地図
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 14,
  center: new google.maps.LatLng(35.710139, 139.810833),
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

// マーカー
new google.maps.Marker({
  position: new google.maps.LatLng(35.710139, 139.810833),
  map: map,
  icon: "v.png"
});
</script>

Markerのコンストラクタのiconオプションで、画像ファイルのURLを与えてやると、デフォルトのマーカーの代わりに表示してくれます。画像が表示される位置は、画像の下部中央がpositionで指定した座標に乗って表示されます。

それではうれしくない場合には、MarkerImageクラスを使って指示してやります。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map" style="width: 400px; height: 280px;"></div>
<script type="text/javascript">
// 地図
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 14,
  center: new google.maps.LatLng(35.710139, 139.810833),
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

// マーカー
new google.maps.Marker({
  position:   new google.maps.LatLng(35.710139, 139.810833),
  map: map,
  icon: new google.maps.MarkerImage(
    'x.png',                     // url
    new google.maps.Size(31,31), // size
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(16,16) // anchor
  )
});
</script>
google.maps.MarkerImage()コンストラクタの引数は、
url
画像のURL(String)
size (省略可)
表示させる画像のサイズ (google.maps.Size)
origin (省略可)
画像データの中で、どの部分を起点として表示させるか (google.maps.Point)
anchor (省略可)
マーカーのpositionで与えられる緯度経度を画像のどの点にするか (google.maps.Point)。省略時は中央下部。これだけを指定する場合でもsizeやoriginも省略できません。
第5引数(scaledSize)を与えると、画像の大きさを拡大縮小させて表示させることもできるようですが、ちゃんと用意したほうがキレイに表示されそうなので省略。