2-7：同じような複数のアイコンを効率よく追加する

「2－2：マーカーをオリジナル画像にする」では、オリジナル画像のマーカーを追加してみました。

ですが、「2－2：マーカーをオリジナル画像にする」で紹介した方法だと、複数の画像を使いたいようなときには少々面倒です。

そこで今回は『複数の画像を、マーカーの画像に指定する方法』を紹介します

９個のオリジナルマーカーが表示された
(新しいウィンドウで表示する)

複数の画像をマーカーの画像にするサンプルプログラム

今回のサンプルは、９個のマーカー画像　＋　影アイコン画像を組み合わせて、９個のマーカーを作る方法です。

影アイコンの画像

アイコンの画像

オリジナルマーカーを表示するプログラムその２

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
//テンプレートのマーカーを作成
var baseicon = new GIcon();
baseicon.shadow = "/img/shadow.png";
baseicon.iconSize = new GSize(32, 32);
baseicon.shadowSize = new GSize(37, 34);
baseicon.iconAnchor = new GPoint(10, 34);
baseicon.infoWindowAnchor = new GPoint(16, 10);
baseicon.infoShadowAnchor = new GPoint(15, 31);


    function load() {
      if (GBrowserIsCompatible()) {

        //地図を作成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.677335,139.744613), 16);

        
        //表示エリアの範囲を取得
        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();
        var lngSpan = ne.lng() - sw.lng();
        var latSpan = ne.lat() - sw.lat();
        
        //ランダムでマーカーを配置する
        for (var i = 1; i < 10; i++) {
            var lat = sw.lat() + latSpan * Math.random();
            var lng = sw.lng() + lngSpan * Math.random();
            var latlng = new GLatLng(lat, lng);
            map.addOverlay(makeMarker(latlng, i));
        }
      }
    }

function makeMarker(point, iconIdx){
    //マーカーを作成する
    var markerIcon=new GIcon(baseicon);
    markerIcon.image = "/img/"+iconIdx+".png";
    var marker = new GMarker(point, { icon:markerIcon });
    GEvent.addListener(marker, "click", function(){
        marker.openInfoWindowHtml("これは "+ iconIdx +"番目のアイコンです");
    });
    
    return marker;
}

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

サンプルプログラムの解説

今回のポイントは、『テンプレートとなるアイコンを基本にして、アイコンを作成する』ということです。
そのやり方の大事な部分は、上のサンプルプログラムの赤枠で囲んだ部分です。

[ 第１のポイント ]
　　基本となるbaseicon のimage プロパティを指定していないことに注目してください。
　　この状態で地図に追加すると、影だけのアイコンが追加されます。

[ 第２のポイント ]
　　アイコンを作成するGIconのコンストラクタは次のようになっています。

　GIcon(コピー(省略可能), イメージ画像(省略可能))　

　　　コピー：GIconオブジェクトを渡すと、それを基に複製する

　　　イメージ画像：GIconオブジェクトを生成するために使用する画像

　　つまりGIconクラスにGIconオブジェクトを渡してあげると、コピーを生成してくれるのです。
　　今回はココが『肝(キモ)』になってきます。

[ 第３のポイント ]
　　GIconオブジェクトを生成したあとにimageプロパティで個別の画像を指定しています。
（今回のケースでは、１～９のアイコン画像）

　　もちろん new GIcon（） の際に指定することもできますが、今回は分かりやすくするために分けてみました。

今回のように、同じようなアイコンを複数追加する場合には、この方法は有効です。
大量にマーカーを作成するようなときには、非常に役立ちますので、参考にしてみてください。