先月終わった、案件で店舗が複数あり、それをひとつの地図にマーカーを
表示させるという要望があり実装しました。
今後も企業や店舗のサイトではよく使うと思うので、私用の覚書
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タグも使えます。
地図の縮尺と中心位置を指定。
次は、吹き出しを一か所だけにしたいので、それは次の機会に(=゚ω゚)ノ
参考サイト