Custom Map Controls

Version 2 (2006.4)　新規

Version 2 of the Maps API introduces the ability to create custom map controls, like the built-in pan and zoom controls, by subclassing the built-in GControl class. In this example, we create a simple zoom control that has textual links rather than the graphical icons used in the standard Google Maps zoom control.

The GTextualZoomControl class defines the two required methods of the GControl interface: initialize(), in which we create the DOM elements representing our control; and getDefaultPosition(), in which we return the GControlPosition used if another position is not given when this control is added to a map. See the class reference for GControl for more information about the methods you can override when you create your custom controls.

All map controls should be added to the map container which can be accessed with the getContainer() method on GMap2.

// A TextualZoomControl is a GControl that displays textual "Zoom In"
　// and "Zoom Out" buttons (as opposed to the iconic buttons used in
　// Google Maps).
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
　
　// Creates a one DIV for each of the buttons and places them in a container
　// DIV which is returned as our control element. We add the control to
　// to the map container and return the element for the map class to
　// position properly.
TextualZoomControl.prototype.initialize = function(map) {
　 var container = document.createElement("div");
　
　 var zoomInDiv = document.createElement("div");
　 this.setButtonStyle_(zoomInDiv);
　 container.appendChild(zoomInDiv);
　 zoomInDiv.appendChild(document.createTextNode("Zoom In"));
　 GEvent.addDomListener(zoomInDiv, "click", function() {
　　 map.zoomIn();
　 });
　
　 var zoomOutDiv = document.createElement("div");
　 this.setButtonStyle_(zoomOutDiv);
　 container.appendChild(zoomOutDiv);
　 zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
　 GEvent.addDomListener(zoomOutDiv, "click", function() {
　　 map.zoomOut();
　 });
　
　 map.getContainer().appendChild(container);
　 return container;
}
　
　// By default, the control will appear in the top left corner of the
　// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
　　 return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));　//第二引数はオフセット値
}
　
　// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
　 button.style.textDecoration = "underline";
　 button.style.color = "#0000cc";
　 button.style.backgroundColor = "white";
　 button.style.font = "small Arial";
　 button.style.border = "1px solid black";
　 button.style.padding = "2px";
　 button.style.marginBottom = "3px";
　 button.style.textAlign = "center";
　 button.style.width = "6em";
　 button.style.cursor = "pointer";
}
　
var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);

GControl ：
These methods will be called by the map when the control is added to the map using GMap2.addControl(). Thus, these methods will not be called by you, but they will be implemented by you.