googleマップにマーカーしてメッセージを付けるサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<div id="map" style="width: 400px; height: 280px;"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script language="JavaScript"> var data = { "1":{ "A":"①地点です", "M":"35.001", "N":"139.001" } ,"2":{ "A":"②地点です", "M":"35.002", "N":"139.002" } ,"3":{ "A":"③地点です", "M":"35.003", "N":"139.003" } }; function attachMessage(marker, msg) { google.maps.event.addListener(marker, 'click', function ($) { new google.maps.Geocoder().geocode({ latLng: marker.getPosition() }, function(result, status) { if (status == google.maps.GeocoderStatus.OK) { new google.maps.InfoWindow({ content: msg }).open(marker.getMap(), marker); } }); }); } var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: new google.maps.LatLng(35, 139), scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); for ( var i in data ) { var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(data[i]["M"], data[i]["N"]), map: myMap, }); attachMessage(myMarker, data[i]["A"]); } </script> |