http://www.google.com/apis/maps/documentation/
In this example, we show a custom info window above each marker by listening to the click event for each marker. We take advantage of JavaScript function closures to customize the info window content for each marker.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Creates a marker at the given point with the given number label
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
});
return marker;
}
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
For more information about events, see the Events Overview. For a complete list of GMap2 events and the arguments they generate, see GMap2.Events.
// Center the map on Palo Alto var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); // Creates a marker whose info window displays the given number function createMarker(point, number) { var marker = new GMarker(point); // Show this marker's index in the info window when it is clicked var html = "Marker #<b>" + number + "</b>"; GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } // Add 10 random markers in the map viewport var bounds = map.getBoundsLatLng(); var width = bounds.maxX - bounds.minX; var height = bounds.maxY - bounds.minY; for (var i = 0; i < 10; i++) { var point = new GPoint(bounds.minX + width * Math.random(), bounds.minY + height * Math.random()); var marker = createMarker(point, i + 1); map.addOverlay(marker); }
ランダムに10個マーカーを表示
マーカーをクリックするとinfowindowが開く
(2005.12)
In the following example, we show a custom info window above each marker by listening to the click event for each marker. We take advantage of function closures to customize the info window content for each marker.
スクリプト例題の経度緯度が小数点4位へ