ExtMapTypeControl How-to

You can add an ExtMapTypeControl to any Google Map with just one line of code. ExtMapTypeControl can be invoked with or without creating map type buttons. If map type buttons are used, ExtMapTypeControl needs to know the number of accessible map types, therefore it should be added after adding, removing or setting any map type in this case.

  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 13);
  map.addControl(new GSmallMapControl());
  map.setMapType(G_SATELLITE_MAP);
  map.addControl(new ExtMapTypeControl( {useMapTypes: true }));

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.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);
  map.addControl(new ExtMapTypeControl( {useMapTypes: true }));

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 showTraffic: true 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.setCenter(new GLatLng(37.441944, -122.141944), 13);
  map.setMapType(G_SATELLITE_MAP);
  map.addControl(new ExtMapTypeControl({useMapTypes: true, showTraffic: true, showTrafficKey: true}));

View example (trafficexample.html).

Adding the More... Button

You can also add a More... Button to display additional layers on the map. At the moment this buttion covers the possibility to display three further layers: photos from Panoramio, videos from Youtube and Wikipedia articles in different languages. See also the coverage list of officially documented layers.

  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  map.addControl(new ExtMapTypeControl( { useMapTypes: true, showMore: true } ));

View example (morebuttonexample.html).

Adding the Buttons to Save Positions

With the following code you can enable the buttons to save and restore the positions of the map:

  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  map.addControl(new ExtMapTypeControl( { useMapTypes: true, showSave: true } ));

View example (savebuttonsexample.html).

With GHierarchicalMapTypeControl

It's also possible to use ExtMapTypeControl in conjunction with map type buttons created by the API, for example GHierarchicalMapTypeControl. In this case the option useMapTypes should be omited and substituted by the posRight option. The spacing of the first (More or Traffic) button that appears on the right hand side from the right map border is defined in pixels:

  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  map.addControl(new GLargeMapControl());
  // Add ExtMapTypeControl with posRight option
  map.addControl(new ExtMapTypeControl( { posRight: 220, showTraffic: true, showTrafficKey: true, showMore: true } ));
  // Add GHierarchicalMapTypeControl
  map.addMapType(G_PHYSICAL_MAP);
  var hControl = new GHierarchicalMapTypeControl();
  hControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
  map.addControl(hControl);
  map.setMapType(G_PHYSICAL_MAP);

View example (with-hierarchicalMapTypeControl.html).

With GMenuTypeControl

Here is an example of how to use ExtMapTypeControl together with GMenuTypeControl. All that should be done is to define an appropriate integer for the posRight option and to specify which further controls should be shown:

  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  map.addControl(new GLargeMapControl());
  map.addMapType(G_PHYSICAL_MAP);
  map.setMapType(G_HYBRID_MAP);
  // Add GMenuTypeControl
  map.addControl(new GMenuMapTypeControl());
  // Add ExtMapTypeControl with posRight option
  map.addControl(new ExtMapTypeControl( { posRight: 106, showTraffic: true, showMore: true } ));

View example (with-menuMapTypeControl.html).

With setUIToDefault

ExtMapTypeControl can also be used together with setUIToDefault. You should again choose an appropriate integer for the posRight option and specify which further controls should be shown:

  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 10);
  // Add ExtMapTypeControl with posRight option
  map.addControl(new ExtMapTypeControl( { posRight: 290, showTraffic: true, showTrafficKey: true, showMore: true } ));
  // Set default UI
  map.setUIToDefault();

View example (with-setUIToDefault.html).