Google Maps API - Map Controls

Google Maps API - Map Controls

Photo Max Walker
NewCircle, Inc.
Member since Sep 29, 2010
Stream Posts: 322
Posted on Apr 19, 2009 (6 years ago)
Seen 306 times.
Tagged As:

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(new GSmallMapControl());

We can now remove, say, Hibryd option:


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:


Default UI Controls

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


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


You have to login to post a comment.