Playing with colors

The map types 'Black' and 'White' are the transparent upper layer of 'Hybrid' map type.

A new GMapType was created using G_HYBRID_MAP.getTileLayers()[1] as the GTileLayer

The difference between B & W is the background color of the map DIV.

The initial background color is set by GMap2() option. Later the color is changed by 'maptypechanged' event.

The resulting map types can even be useful in certain situations. Try zooming out to continent level.

It is ashtonishing how readable the labels are with any background color.

ZoomDisplayControl()

The number label next to [Zoom in] button is a simple custom GControl().

Copy the code from below and attach to your map by:

map.addControl(new ZoomDisplayControl());

More experiments

email: gmapsapi(at)gmail.com

/**
 * zoom level display as a custom GControl()
 * @author Esa 2009
 */
function ZoomDisplayControl(opt_options){
  this.opts = opt_options || {};
};
ZoomDisplayControl.prototype = new GControl();
ZoomDisplayControl.prototype.initialize = function(map) {
  var display = document.createElement("div");
  map.getContainer().appendChild(display);
  GEvent.addListener(map, 'zoomend', function(o,z){
    display.innerHTML = z + "";
  });
  display.innerHTML = map.getZoom() + "";
  display.className = "zoom-level-display";
  display.title = "Current zoom level";
  if(!this.opts.noStyle){
    display.style.fontFamily = "Arial, sans-serif";
    display.style.fontSize = "11px";
    display.style.textAlign = "center";
    display.style.backgroundColor = "#fff";
    display.style.width = "15px";
    display.style.height = "15px";
    display.style.border = "1px solid #000";
    display.style.MozBoxShadow = "1px 1px 1px #999";
    display.style.WebkitBoxShadow = "1px 1px 1px #999";
  }
  this.htmlElement = display;
  return display;
}
ZoomDisplayControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,72));
}