Custom Overlays

Version 2 (2006.4) 新規

Version 2 of the Maps API introduces the ability to create custom map overlays, like the built-in GMarker and GPolyline overlays, by subclassing the built-in GOverlay class. In this example, we create a Rectangle overlay that outlines a geographic region on the map.

The Rectangle class defines the four required methods of the GOverlay interface: initialize(), in which we create the DOM elements representing our overlay; remove(), in which we remove the overlay elements from the map; copy(), which copies the overlay for use in another map instance; and redraw(), which positions and sizes the overlay on the map based on the current projection and zoom level. See the class reference for GOverlay for more information about the methods you can override when you create your custom overlays.

Every DOM element that makes up an overlay exists on a map pane that defines the z-order at which it will be drawn. For example, polylines are flat against the map, so they are drawn in the lowest G_MAP_MAP_PANE. Markers place their shadow elements in the G_MAP_MARKER_SHADOW_PANE and their foreground elements in the G_MAP_MARKER_PANE. Placing your overlay elements in the correct panes ensures that polylines are drawn below marker shadows and the info window is drawn above other overlays on the map. In this example, our overlay is flat against the map, so we add it to the lowest z-order pane G_MAP_MAP_PANE, just like GPolyline. See the class reference for a complete list of map panes.

　// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
　// map. It has a border of the given weight and color and can optionally
　// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
　this.bounds_ = bounds;
　this.weight_ = opt_weight ｜｜ 2;　
　this.color_ = opt_color ｜｜ "#888888";　
}
Rectangle.prototype = new GOverlay();
　
　// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
　 // Create the DIV representing our rectangle
　 var div = document.createElement("div");
　 div.style.border = this.weight_ + "px solid " + this.color_;
　 div.style.position = "absolute"　//絶対位置表示;
　
　 // Our rectangle is flat against the map, so we add our selves to the
　 // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
　 // below the marker shadows)
　 map.getPane(G_MAP_MAP_PANE).appendChild(div);
　
　 this.map_ = map;
　 this.div_ = div;
}
　
　// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
　 this.div_.parentNode.removeChild(this.div_);
}
　
/　/ Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
　 return new Rectangle(this.bounds_, this.weight_, this.color_,
　　　 this.backgroundColor_, this.opacity_);
}
　
　// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
　 // We only need to redraw if the coordinate system has changed
　 if (!force) return;
　
　 // Calculate the DIV coordinates of two opposite corners of our bounds to
　 // get the size and position of our rectangle
　 var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
　 var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
　
　 // Now position our DIV based on the DIV coordinates of our bounds
　 this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
　 this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
　 this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
　 this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
}
　
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
　
　// Display a rectangle in the center of the map at about a quarter of
　// the size of the main map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngDelta = (northEast.lng() - southWest.lng()) / 4;
var latDelta = (northEast.lat() - southWest.lat()) / 4;
var rectBounds = new GLatLngBounds(
　　 new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
　　 new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
map.addOverlay(new Rectangle(rectBounds));

getPane(pane)　：　Node ／ Returns a DIV that holds the object in the layer identified by pane. Used by GOverlay instances in method GOverlay.initialize() instances to draw themselves on the map

G_MAP_MAP_PANE　：　This pane is still below the shadows of the markers, directly on top of the map. It contains for instance the polylines.

Googleのサンプル
http://www.google.com/apis/maps/docu­mentation/customoverlay.html

上記サンプルを改造して面の塗りをおこなったもの。
IEとFireFoxで確認、Operaは面が透過せず（Style設定の仕方は？）。
GLog.write()もテストしています。
http://never-ever.info/googlemaps/ve­r2/c_over.html