Rich Gibson & Schuyler Erle著 武舎広幸+福地太郎+武舎るみ訳 GOOGLE MAPS HACKSTM

追加情報９　setImage()によるマーカー画像の変更（2007年３月７日追加）

APIバージョン2.75から加わったGMarkerのメソッドsetImage()を使うと、マーカーの画像を簡単に変えることができます。たとえば、下の例では、怪獣がクリックされると怪獣の画像を変えるようにしています。従来のAPIだと、別のGMarkerオブジェクトを作っておいて切り替えるというのが普通の方法でした。

2007年3月７日現在、APIのバージョンを2.75に指定しないと動きませんのでご注意ください。

コードは次のようになっています。

    var flag = 0;  // 最初は火を吹いていない画像
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65749, 139.74693), 17, G_SATELLITE_MAP);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());

    var icon = new GIcon();
    icon.image = "images/animal-nofire.png"; // 最初は火を吹いていない画像
    icon.iconSize = new GSize(299, 216);
    icon.shadowSize = new GSize(299, 216);
    icon.iconAnchor = new GPoint(133, 108); // 画像の中央をアンカーに
    icon.infoWindowAnchor = new GPoint(190, 45);
    icon.infoShadowAnchor = new GPoint(190, 45);
  
    var point = new GPoint(139.74751, 35.657); //画像のアンカーの位置
    var marker = new GMarker(point, {icon: icon, draggable: true, dragCrossMove: true, 
		                                 title: "クリックしてみてください！"});
		
    GEvent.addListener(marker, "click", function() {
      if (flag == 0) {
        marker.setImage("images/animal.png"); // 火を吹いている画像に変更　★これが新しいメソッド
        flag = 1;
      }
      else {
        marker.setImage("images/animal-nofire.png"); // 火を吹いていない画像に変更　★これが新しいメソッド
        flag = 0;
      }
     });
    map.addOverlay(marker);