グーグルマップでアクセス地図を表示することがあるが、たまに吹き出しで情報を表示してほしいという依頼がある。
ちなみに吹き出しはhtmlで装飾可能。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id="map" style="width: 400px; height: 280px;"></div> <script type="text/javascript"> var myMap = new google.maps.Map(document.getElementById("map"), { // ズームレベル zoom: 14, // 中心点緯度経度 center: new google.maps.LatLng(26.2300633, 127.6858965), // 距離目盛りの表示 scaleControl: true, // 地図の種類 mapTypeId: google.maps.MapTypeId.ROADMAP }); var myMarker = new google.maps.Marker({ // マーカーを置く緯度経度 position: new google.maps.LatLng(26.2300633, 127.6858965), map: myMap }); var myInfoWindow = new google.maps.InfoWindow({ // 吹き出しに出す文 content: "リマープロ" }); // 吹き出しを開く myInfoWindow.open(myMap, myMarker); // 吹き出しが閉じられたら、マーカークリックで再び開くようにしておく google.maps.event.addListener(myInfoWindow, "closeclick", function() { google.maps.event.addListenerOnce(myMarker, "click", function(event) { myInfoWindow.open(myMap, myMarker); }); }); </script>