Display Info Windows Above Markers

http://www.google.com/apis/maps/docu­mentation/

Version 2 (2006.4)

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.

Version 1

// 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位へ