Google Map API　その１　マーカーを画像に変更し、吹き出しを複数配置する方法

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは、今日も備忘録のために少しGoogle map apiについて書こうかと思います。ずいぶん前にv3が出始めてから以降触ってなかったのですが色々できてやっぱり便利です。
ちなみに完成はこんな感じになりました
　

グレースケールやカラフルなマップ等、11種類のデザインコード例

11種類のデザイン&コード例を作成してみましたのでご興味がございましたら遊んでみてください。 


// <![CDATA[
    var marker_list=[];
    function load() {
	  if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById(&quot;map&quot;));
        map.setCenter(new GLatLng(40.740494,-73.99704), 12);
		var img=’images/pinA.png’;
        var txt=’dammy text’;
        marker_list[‘Mr Kame’] = addMarker(40.740494,-73.99704, txt, img);
        map.addOverlay(marker_list[‘Mr Kame’]);
		img=’images/pinB.png’;
		txt=’dammy text’;
        marker_list[‘ねこ’] = addMarker(40.777422,-73.953094, txt, img);
        map.addOverlay(marker_list[‘ねこ’]);
		img=’images/pinC.png’;
        txt=’dammy text’;
        marker_list[‘Mr Kame’] = addMarker(40.738413,-74.036179, txt, img);
        map.addOverlay(marker_list[‘Mr Kame’]);
		img=&quot;images/pinB.png&quot;;
		txt='<img src="images/icon.png" height="50px">
ねこさん <a href="">Neko house</a>
‘;
        marker_list[‘ねこ’] = addMarker(40.767022,-73.990173, txt, img);
        map.addOverlay(marker_list[‘ねこ’]);
	  }
    }
    function addMarker(lat, lng, txt, img){
        var latlng = new GLatLng(lat, lng);
		var icon = new GIcon();
		icon.image = img;
		icon.iconSize = new GSize(46, 62);
		icon.iconAnchor = new GPoint(23, 62);
		icon.infoWindowAnchor = new GPoint(23, 0);
        var marker = new GMarker(latlng,icon);
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(txt);
        });
        return marker;
    }
    function clickMarker(index){
        GEvent.trigger(marker_list[index], "click");
    }
// ]]>

少しだけ補足を加えると、１つマーカーの設置、ステータスは以下の部分で書いています。


	img=’images/pinB.png’;
	txt=’dammy text’;
        marker_list[‘sample’] = addMarker(40.777422,-73.953094, txt, img);
        map.addOverlay(marker_list[‘sample’]);


今回はそのステータス内に個別に画像マーカーをあてています。
要望次第ではカテゴリー等々定義して施設や目的別でアイコンの色や形を変えてみても面白いと思います。