googleマップにマーカーしてメッセージを付けるサンプル
<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>
