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

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

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

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

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

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


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

 影アイコンの画像

アイコンの画像

オリジナルマーカーを表示するプログラム その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>

 

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

今回のポイントは、『テンプレートとなるアイコンを基本にして、アイコンを作成する』ということです。
そのやり方の大事な部分は、上のサンプルプログラムの赤枠で囲んだ部分です。
[ 第1のポイント ]
  基本となるbaseicon のimage プロパティを指定していないことに注目してください。
  この状態で地図に追加すると、影だけのアイコンが追加されます。

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

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

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

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


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

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

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

 


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





サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら