GoogleMaps/API/doc/Examples/15-CustomMapControlsのソース-N☆E 学習帳

*Custom Map Controls
**Version 2 (2006.4)　&font(Red){新規};
>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 &font(Aqua){TextualZoomControl};() {~
}~
&font(Aqua){TextualZoomControl};.prototype = new &font(Red){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.~
&font(Aqua){TextualZoomControl};.prototype.&font(Red){initialize}; = function(&font(Red){map};) {~
　  var container = document.createElement("div");~
　~
　  var zoomInDiv = document.createElement("div");~
　  this.&font(Fuchsia){setButtonStyle_};(zoomInDiv);~
　  container.appendChild(zoomInDiv);~
　  zoomInDiv.appendChild(document.createTextNode("Zoom In"));~
　  GEvent.&font(Red){addDomListener};(zoomInDiv, "click", function() {~
　　    map.&font(Red){zoomIn};();~
　  });~
　~
　  var zoomOutDiv = document.createElement("div");~
　  this.&font(Fuchsia){setButtonStyle_};(zoomOutDiv);~
　  container.appendChild(zoomOutDiv);~
　  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));~
　  GEvent.&font(Red){addDomListener};(zoomOutDiv, "click", function() {~
　　    map.&font(Red){zoomOut};();~
　  });~
　~
　  map.&font(Red){getContainer};().appendChild(container);~
　  return container;~
}~
　~
　// By default, the control will appear in the top left corner of the~
　// map with 7 pixels of padding.~
&font(Aqua){TextualZoomControl};.prototype.&font(Red){getDefaultPosition}; = function() {~
　　  return new &font(Red){GControlPosition};(&font(Red){G_ANCHOR_TOP_LEFT};, new GSize(7, 7));　//第二引数はオフセット値~
}~
　~
　// Sets the proper CSS for the given button element.~
&font(Aqua){TextualZoomControl};.prototype.&font(Fuchsia){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 &font(Red){GMap2};(document.getElementById("map"));~
map.addControl(new &font(Aqua){TextualZoomControl};());~
map.&font(Red){setCenter};(new &font(Red){GLatLng};(&font(Blue){37.441944};, &font(Lime){-122.141944};), &font(Red){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.
|TLEFT|||c
|initialize(map)|Node|Will be called by the map so the control can initialize itself. The control will use the method GMap2.getContainer() to get hold of the DOM element that contains the map, and add itself to it. It returns the added element.|
|getDefaultPosition()|GControlPosition|Returns to the map the position in the map view at which the control appears by default. This will be overridden by the second argument to GMap2.addControl().|