October 27, 2016
Hot Topics:

Tweaking the Google Maps API Controls, Page 2

  • March 23, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Tweaking the Google Maps MapControl Display and Default Map Type

By default, the Google Maps API will use a horizontal bar layout for presenting the two map type options (the default roadmap and the satellite). You can optionally alternatively present this information using a dropdown menu, as exemplified in Figure 5.

Using a Map Type Dropdown Menu
Figure 5. Using a Map Type Dropdown Menu

Use the dropdown menu layout by passing google.maps.MapTypeControlStyle.DROPDOWN_MENU to the style property of the mapTypeControlOptions, as demonstrated here:

var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

Notice how the default map type is also set using the mapTypeId property. In the case of the above example, we're setting the map type to the default ROADMAP. You can alternatively set this to SATELLITE, HYBRID, or TERRAIN.

Assigning Control Location with Google Maps API

All map controls are associated with default display locations. The mapType control is situated at the top-right of the map, while the StreetMap, panControl, and zoomControl are all presented at the top-left of the map. You can, however, override these defaults to place the controls wherever you please. This is accomplished by passing a control position setting to each respective control's position property. For instance, you can move the mapType control to the lower-right of the map like so:

var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.RIGHT_BOTTOM

Executing this variation produces the map presented in Figure 6.

Moving the Map Type Control
Figure 6. Moving the Map Type Control

This feature is more powerful than it may initially appear because of the considerable flexibility you have in terms of control placement. For instance, specifying RIGHT_BOTTOM is different from specifying BOTTOM_RIGHT in that if you used the latter instead of the former (which was used in the previous example), the end result is a map type control placed as depicted in Figure 7.

A Map Type Control Placement Variation
Figure 7. A Map Type Control Placement Variation

The Google Maps API documentation offers a detailed breakdown of the placement position differences. See this page for more details.

Creating Your Own Controls

Even seasoned Google Maps API developers are often surprised to learn it's possible to create custom map controls. For instance, you might create a control that enables or disables a default set of markers or displays a marathon route. The WalkJogRun website offers a particularly impressive set of custom controls, which are definitely worth checking out if you are interested in creating custom controls.

As a simple example, I've created a custom control that will display markers related to the Heinz Field and PNC Park football and baseball stadiums located in Pittsburgh, Pennsylvania. These markers will display when clicking the STADIUMS control presented in Figure 8.

Creating a Custom Control with Google Maps API
Figure 8. Creating a Custom Control

The code used to create such a control is surprising easy. All you have to do is design a DIV element using whatever CSS styling you'd like. Then you'll identify this DIV as a map control by pushing it onto the map.controls array, and finally assign a listener to the DIV, which will execute the associated JavaScript in accordance with a particular event (such as a click). The code (less the CSS and DIV) used to create this control is presented below:

function initialize() {
var latlng = new google.maps.LatLng(40.44579, -80.01504);
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP

var map = new google.maps.Map(document.getElementById("map"), options);

var element = document.getElementById('control');


google.maps.event.addDomListener(element, 'click', function() {
var nfl = new google.maps.Marker({
position: new google.maps.LatLng(40.44579, -80.01504),
map: map,
title:"Heinz Field"

var mlb = new google.maps.Marker({
position: new google.maps.LatLng(40.44690, -80.00551),
map: map,
title:"PNC Park"



Are you doing anything interesting with Google Maps API controls? Tell us about your experiences in the comments!

About the Author

Jason Gilmore--Contributing Editor, PHP--is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.

Tags: Google Maps

Originally published on http://www.developer.com.

Page 2 of 2

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel