Google Maps API v3で、地図のマーカーと吹き出しを複数表示する方法

先月終わった、案件で店舗が複数あり、それをひとつの地図にマーカーを
表示させるという要望があり実装しました。
今後も企業や店舗のサイトではよく使うと思うので、私用の覚書

1、headタグ内に、Maps API JavaScript を読込みます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

2、地図を表示するための div 要素を “map” という名前で作成します。
CSSで、地図のサイズ指定。

<div id="map" style="width:640px; height:640px;"></div>

3,上記div要素(id=”map”)の下に、表示させる内容のパラメータを記述
こちらは元営業マンのWEB研究メモの「google map api v3で、1つの地図に複数のマーカー+吹き出しを表示」を使わせていただきました。

<script type="text/javascript">
function attachMessage(marker, msg) {
google.maps.event.addListener(marker, 'mouseover', function(event) {
new google.maps.InfoWindow({
content: msg
}).open(marker.getMap(), marker);
});
}
// 位置情報と表示データの組み合わせ
var data = new Array();//マーカー位置の緯度経度
data.push({position: new google.maps.LatLng(35.710208, 139.812734), content: '<b style="color:#417a06;" class="fukidashi_s">東京スカイツリーイーストタワー</b>'});
data.push({position: new google.maps.LatLng(35.709194, 139.812238), content: '<b style="color:#00a0e9;">稲垣押上店</b><br>おいしいもつ焼き屋'});
data.push({position: new google.maps.LatLng(35.706273, 139.811496), content: '<b style="color:#715000;">業平小学校</b><br>私が卒業した小学校です'});

var myMap = new google.maps.Map(document.getElementById('map'), {
zoom: 16,//地図縮尺
center: new google.maps.LatLng(35.710702, 139.812935),//地図の中心点
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

for (i = 0; i < data.length; i++) {
var myMarker = new google.maps.Marker({
position: data[i].position,
map: myMap
});
attachMessage(myMarker, data[i].content);
}
</script>

吹き出しをマーカーの上にオンマウスさせたい場合はユーザーイベントgoogle.maps.event をオンマウス(’mouseover’)。
クリックさせたい場合は(’Click’)へ。
data.pushにマーカー位置の緯度経度と吹き出しの内容を記述。HTMLタグも使えます。
地図の縮尺と中心位置を指定。

次は、吹き出しを一か所だけにしたいので、それは次の機会に(=゚ω゚)ノ

参考サイト

この記事をシェアする