ExtMapTypeControl How-to

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

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).

Adding the Traffic Button

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);

View example (trafficexample.html).