デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

Google Mapsで複数マーカー表示とオリジナルマーカーを同時に使うサンプル

·

master

既にGoogle Maps V3が一般的になっているが、V2で作られているサイトに修正が必要となり、複数のマーカーを一度に表示する必要があったり、オリジナルのアイコン・画像を使ったマーカーにしなくてはならないこともあるだろう。
V3であれば、サンプルも多く覚えるメリットもあるが、今更V2を復習するのは苦痛なはず。
ということで、そのまま使えるサンプルを以下に掲載する。

必須条件としてはmapキーは既に取得済であること。

サンプルでは、二カ所のマーカー（吹き出しも可能）、マップセンターに別色のオリジナルマーカー（吹き出しも可能）となっている。

 

<!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></title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[取得済のマップキー]" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    function load(){
        if(GBrowserIsCompatible()){
            var map = new GMap2(document.getElementById("map"), {size:new GSize(445,445)});
            map.setCenter(new GLatLng(35.689488,139.691706), 10);

            var icon = new GIcon();
            icon.image = "http://maps.google.co.jp/mapfiles/ms/icons/green-dot.png";
            icon.iconSize = new GSize(32,32);
            icon.iconAnchor = new GPoint(16,32);
            icon.infoWindowAnchor = new GPoint(16,0);
            var marker = new GMarker(new GLatLng(35.689488,139.691706),icon);
            map.addOverlay(marker);

            GEvent.addListener(marker,'click', function(){
                var point = marker.getPoint();
                var msg = "緯度"+point.lat()+"<br />経度"+point.lng()+"<br />"
                marker.openInfoWindowHtml(msg);
            });

            addMakers(35.643551,139.860315,"<a href='#'>葛西臨海公園</a>");
            addMakers(35.715911,139.897929,"<a href='#'>篠崎公園</a>");
        }
        map.addControl(new GSmallMapControl());
        function addMakers(lat,lng,text){
            var mk = new GMarker(new GLatLng(lat,lng));
            map.addOverlay(mk);
            GEvent.addListener(mk,"click",showInfoWindow);
            function showInfoWindow(){
            mk.openInfoWindowHtml(text);
            }
        }
    }
    //]]>
</script>

</head>
<body onload="load()" onunload="GUnload();">
<div id="map"></div>
</body>
</html>

In:

,

Tags: