マーカーの画像を動的に変更する

Google MAPS API V3 の google.maps.Marker で、表示している画像を変更させるサンプルプログラム。下の例では、クリックするたびに○と×が交互に表示されます。画像を表示させるだけの場合は、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
});

// ○の画像
var img_o = new google.maps.MarkerImage(
  'o.png',
  new google.maps.Size(31,31),
  new google.maps.Point(0,0),
  new google.maps.Point(16,16)
);

// ×の画像
var img_x = new google.maps.MarkerImage(
  'x.png',
  new google.maps.Size(31,31),
  new google.maps.Point(0,0),
  new google.maps.Point(16,16)
);

// マーカー
var marker = new google.maps.Marker({
  position:   new google.maps.LatLng(35.710139, 139.810833),
  map: map,
  icon: img_o // はじめは ○
});
// マーカーでクリックイベントをListen
google.maps.event.addListener(marker, 'click', function(event) {
  if (marker.getIcon() == img_o) {
    // ○なら×を
    marker.setIcon(img_x);
  } else if (marker.getIcon() == img_x) {
    // ×なら○を
    marker.setIcon(img_o);
  } else {
    // え?
    alert('Oh, my God!');
  }
});
</script>

MarkerImageはコンストラクタ以外にオプション類を設定する術がないので、切り替えたい場合などは複数のMarkerImageを用意しておくか、毎回作ってやる必要があります。

デフォルトのマーカーにしたいときは、nullを与えてやれば良いようです。

    marker.setIcon(null);