Google Maps API - Map Controls



Customize the controls on your map

You can customize what controls are displayed on the map, where they are displayed and how they appear.

Let's add the standard navigation controls:

var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GSmallMapControl());

We can now remove, say, Hibryd option:

map.removeMapType(G_HYBRID_MAP);   

We can even move the controls to any specific location on the map:

var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
var mapControl = new GMapTypeControl();
map.addControl(mapControl, bottomRight);

At this point our map looks like this:

The available anchors for the position are:

  • G_ANCHOR_TOP_RIGHT
  • G_ANCHOR_TOP_LEFT
  • G_ANCHOR_BOTTOM_RIGHT
  • G_ANCHOR_BOTTOM_LEFT

Default UI Controls

Default UI controls are the same ones you would expect to see at maps.google.com. You can set your map to use the default controls simply by specifying:

map.setUIToDefault();

Note that the default controls are different for large maps (400x300px or larger) and small maps (smaller than 400x300px). Here's the summary of differences:

Small Maps (under 400x300px):

  • A GMenuMapTypeControl holding a drop-down menu of the G_DEFAULT_MAP_TYPES map types
  • A GSmallZoomControl3D enabling zoom functionality (no pan control is added)

Large Maps (400x300px and up):

  • A GMapTypeControl holding the set of G_DEFAULT_MAP_TYPES map types
  • A GLargeMapControl3D enabling full zoom/pan functionality
  • A GScaleControl that displays the scale in use by the map

Both maps, however, will have the following options:

  • Scrollwheel zooming
  • Double-click zooming
  • Keyboard handling