“Google Maps”

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

2012年10月30日

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>

Google Mapsでクリックやドラッグされた時にデータを取得したいとき。

2012年6月14日

master

Google Mapsでは地図を表示するだけでなく様々なイベントに対して情報を取得することが可能。
よく使うもの、便利な機能の具体的なJavascriptの中から。
var map = new google.maps.Map(mapdiv, myOptions);
で描画されたグーグルマップに対して以下の場合
マップがドラッグされたらマップセンターの緯度経度を取得する時
google.maps.event.addListener(map, 'drag', function(){
var mce = map.getCenter();
var mce_lat = mce.lat();
var mce_lng = mce.lng();
});
マップのズームレベルが変更されたら倍率を取得する時
google.maps.event.addListener(map, 'zoom_changed', function(){
var mzo =  map.getZoom();
});
マップのドラッグが終わったらマーカーの緯度経度を取得する時
google.maps.event.addListener(marker, 'dragend', function(){
var mpo = marker.position;
var mpo_lat = mpo.lat());
var mpo_lng = mpo.lng());
});
マップのドラッグが終わったらマップの表示範囲を取得する時
google.maps.event.addListener(map, 'drag', function(){
var mab = map.getBounds();
var m_ne_lat = mab.getNorthEast().lat();
var m_sw_lat = mab.getSouthWest().lat();
var m_ne_lng = mab.getNorthEast().lng();
var m_sw_lng = mab.getSouthWest().lng();
});
マップをクリックした場所の緯度・経緯を取得する時
google.maps.event.addListener(map, 'click', function(event){
var mk_lat_lng = marker.setPosition(event.latLng);
});
マップをクリックした場所の緯度・経緯を個別に取得する時
google.maps.event.addListener(map, 'click', function(event){
var mk_lat = event.latLng.lat();
var mk_lng = event.latLng.lng();
});