Map Overlays

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

Version 2 (2006.4)

This example displays 10 markers at random locations on the map and a polyline with 5 random points. GMarker use the default Google Maps icon if no other icon is given. See Creating Icons for an example using custom icons.

Remember that you must include the VML namespace and CSS in your HTML document to view polylines in IE. See XHTML and VML for more information.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
　
／／ Add 10 markers in random locations on the map
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(new GMarker(point));
}
　
／／ Add a polyline with five random points. Sort the points by
／／ longitude so that the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
　 points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
　　　 southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
　 return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));

サンプル
http://www.google.com/apis/maps/docu­mentation/overlay.html
VML namespace と CSS　が記述されていないので、IE ではポリラインが描画されません。

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);
　
／／ Add 10 random markers in the map viewport using the default icon
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 = new GMarker(point);
　 map.addOverlay(marker);
}
　
／／ Add a polyline with 4 random points. Sort the points by longitude so that
／／ the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
　 points.push(new GPoint(bounds.minX + width * Math.random(),
　　　 bounds.minY + height * Math.random()));
}
points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points));

ランダムに１０個のマーカーと4本の連続した線（経度を昇順ソートしてつなぐ）が描かれる。

getBoundsLatLng();　　これで地図の境界の経度緯度を取得

配列の要素をソートする
オブジェクト名.sort（比較関数）

数値を比較する時
昇順ソート　function 関数名(a, b){return a-b}
降順ソート　function 関数名(a, b){return b-a}

下側の地図には下の1行を追加して取得した情報を表示させた。

document.getElementById("message").innerHTML = bounds + '<br />width ' + width + '<br />height ' + height;

上記の実行
http://never-ever.info/googlemaps/ov­erlay.php　（別窓）

(2005.12)

To add a marker to a map, first create a GPoint; then give that point as the location of a new GMarker; then pass the marker to addOverlay.

To add a polyline to a map, first create an array of points; then use those points to create a new GPolyline; then pass the polyline to addOverlay.

The following example code creates ten random markers and a random polyline, to illustrate the use of map overlays.

Remember to add the VML namespace and the necessary CSS code; see XHTML and VML for more information.

スクリプトに関して緯度経度が小数点以下4位なった

ISBN:4798010049

これでJavaScript勉強中