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

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


<script type="text/javascript" src="//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クラスを使って指示してやります。ver 3.11からIconタイプというJSON表現に代わっているようです。


<script type="text/javascript" src="//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: {
    url: 'x.png',
    size: new google.maps.Size(31,31),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(16,16)
  }
});
</script>
scaledSizeを与えると、画像の大きさを拡大縮小させて表示させることもできるようですが、ちゃんと用意したほうがキレイに表示されそうなので省略。
関連ページ