ExtMapTypeControl 1.2: Now Supporting Custom Map Types

Posted by Randy Becker, Community Maps API Developer

First off, I'd like to thank Pamela Fox and the whole Google Maps team for creating such an awesome API, and especially for getting the Open Source Utility Library going.

Next, a little background. In my quest to implement custom controls, I discovered the ExtMapTypeControl code in the Google Maps API Open Source Utility Library. Much to my delight, the code was dazzlingly obvious and the control which I created fit perfectly within the GMaps UI. It was super-easy to extend the control with my own custom button(s) in lieu of the Traffic view, and I had hacked the original source to bits in no time. However, there was one part of the code that struck me as a bit inelegant: the assumption that map type controls always displayed the default map-types: G_NORMAL_MAP, G_SATELLITE_MAP and G_HYBRID_MAP. I wanted a control that could display custom map types as well.

For those of you who don't know, you can create your own custom map types, cut your own tiles, or even remove default map types. The GMapTypeControl respects whatever map types are defined, and behaves as expected. I fixed up a version of the ExtMapTypeControl class to work the same way, signed up with the GMaps API Utility Library, and ported those changes into the existing library.

Check out the sample code and example below. You can grab the new javascript from the 1.2/src folder, or wait two weeks for it to be pushed into the release directory.

 
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
map.addControl(new ExtMapTypeControl());

map.removeMapType(G_NORMAL_MAP);
var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)), 0, 'owned by NASA');
var copyrights = new GCopyrightCollection('The Blue Marble Imagery');
copyrights.addCopyright(copyright);
var tilelayer = new GTileLayer(copyrights, 0, 17);
tilelayer.getTileUrl = function(tile, zoom) { 
  return "http://gmaps-utility-library.googlecode.com/svn/trunk/extmaptypecontrol/1.2/examples/blue_marble.jpg"; 
};
var CUSTOM_MAP = new GMapType( [tilelayer], new GMercatorProjection(20), "NASA" );
map.addMapType(CUSTOM_MAP);