You can add an ExtMapTypeControl to any Google Map with just one line of code.
var map = new GMap2(document.getElementById("map")); map.addControl(new ExtMapTypeControl()); map.addControl(new GSmallMapControl()); map.setCenter(new GLatLng(37.441944, -122.141944), 13); map.setMapType(G_SATELLITE_MAP);
View example (extmaptypecontrol.html).
Custom map types work just like they do with a regular GMapTypeControl.
var map = new GMap2(document.getElementById("map")); map.addControl(new ExtMapTypeControl()); map.setCenter(new GLatLng(37.441944, -122.141944), 13); 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 "blue_marble.jpg"; }; var CUSTOM_MAP = new GMapType( [tilelayer], new GMercatorProjection(20), "NASA" ); map.addMapType(CUSTOM_MAP); map.setMapType(G_SATELLITE_MAP);
View example (custommaptypes.html).
If you'd like your users to be able to easily toggle on/off the Traffic layer, you can add a button to the control by specifying showTrafficOn in the ExtMapTypeControlOptions. You can also add a drop-down legend to that button by specifying showTrafficKey, as the example code below shows:
var map = new GMap2(document.getElementById("map")); map.addControl(new ExtMapTypeControl({showTraffic: true, showTrafficKey: true})); map.setCenter(new GLatLng(37.441944, -122.141944), 13); map.setMapType(G_SATELLITE_MAP);