In usability we trust

UX and all things web

Google Maps API 3 – Map settings

In the first article in this series we discussed how to create a simple Map with Google Maps API 3. In this article we will explore the available properties when creating a map and see how we can change the look and behaviour of the map with the help of them.

The required properties

As we saw in the last article there are 3 required properties when creating a map. These are:

  • center
    Takes a coordinate in the form of a google.maps.LatLng that defines the center of the map
  • zoom
    Sets the initial zoom level of the map. It have to be an integer between 0 and 19 where 0 is fully zoomed out and 19 is fully zoomed in.
  • mapTypeId
    Takes a constant of type google.maps.MapTypeId that defines what the initial map type would be

It’s pretty obvious how the two first properties work, but the last one, mapTypeId, requires a brief explanation. What it does is to tell the map what kind of map to display by providing it with a constant. There are a few map types to choose from and they are all contained in the namespace google.maps.MapTypeId. These are:

    A normal map
    Satellite images
    Displays satellite images with roads and labels overlayed on it
    Displays a map with physical features such as terrain and vegetation

So for example, constructing a simple map with the maptype SATELLITE is done like this:

// Creating an object literal containing the properties we want to pass to the map
var options = {
  zoom: 6,
  center: new google.maps.LatLng(57.8, 14.0),
  mapTypeId: google.maps.MapTypeId.SATELLITE
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map'), options);

That code would produce a map that looks something like this.

Controlling the UI

Note that some user controls are displayed on the map by default. In the old API you had to explicitly define which controls that would show but in version 3 it works the other way around, you have to explicitly define which controls not to show.

disableDefaultUI [boolean]

Default value is false. By setting this to true you will disable the default UI. That is: the default zoom control and the map type chooser will not be displayed, much as the default behavior in the old API. You can however also enable or disable these controls individually.

mapTypeControl [boolean]

With this property you control whether the mapTypeControl will be displayed or not. The mapTypeControl is the control positioned in the upper right corner of the map from which you can choose what map type to show. Set it to true to display it and to false to hide it. The default value is true.


With this property you control how the mapTypeControl will be displayed. It can have one of the following values which all resides in the google.maps.MapTypeControlStyle namespace.

    The DEFAULT value will vary the look of the mapTypeControl depending of the size of the window and possibly other factors.
    This option will display the standard bar.
    This will display the control as a drop-down list. It can be handy if the map is small or you want it to take as little space as possible for some other reason. It currently looks a little weird since the arrow is positioned over the text, but I suspect that it’s a temporary glitch that will be fixed in future releases.

If for example you want this control to display like a drop-down menu you define it like this:

var options = {
  zoom: 6,
  center: new google.maps.LatLng(57.8, 14.0),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

Note that its parameter is an object literal with one property, style, which takes one of the constants in google.maps.MapTypeControlStyle as its value. This design might seem a little cumbersome at first but is actually pretty smart. It makes it easy to add more settings for the map type control in future releases of the API.

navigationControl [boolean]

This property displays or hides the navigation control. That is the control that typically resides in the upper left part of the map with which you can zoom and sometimes pan the map. Its appearance has changed a bit since the old version of the API but essentially works the same way. The major difference being that in the old API the large control had a “reset” button that reset the map to its initial state. This feature has been dropped in the new API for unknown reasons.


The style of the navgationControl comes in 4 flavors that all resides in the google.maps.NavigationControlStyle namespace. These are:

    If set to this value, the control will vary according the map size and other factors. As of now that means that it will either display the small or the large control but that might change in future releases.
    This is the small control that only lets you to zoom the map.
    This control looks like the SMALL one, but is supposed to be specifically tailored for the Android mobile platform.
    This is the large control that lets you to both zoom and pan the map.

Here’s some example code on how to display the large control (zoom_pan).

var options = {
  zoom: 6,
  center: new google.maps.LatLng(57.8, 14.0),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  navigationControlOptions: {
    style: google.maps.NavigationControlStyle.ZOOM_PAN

scaleControl [boolean]

This property determines whether the scale control will be displayed or not. Set it to true to display the control and false to hide it. This control is not displayed by default, so if you want it to show you have to explicitly set this property to true.

The scale control is typically positioned in the lower left corner of the map and are used to get a sense of the scale of the map. It looks like this:


You can control how the scale control will be displayed with the help of this property. It currently only has one option which is STANDARD so there’s really not much you can do, but this might change in future releases.

keyboardShortcuts [boolean]

There are some keyboard shortcuts for controlling the map. These are the arrowkeys for panning and +/- for zooming.

Default value is true. If set to false it will disable the keyboard shortcuts.

Map div behavior

The Map div is the HTML element that contains the map. Typically it’s a <div> with id="map" or something similar. There are some properties that controls the behavior of this.

noClear [boolean]

The default setting of this is false, and what it does is to clear the content of the div that contains the map. If set to true it will not clear the initial content of it.

backgroundColor [string]

This property also affects the map div. It sets the color of the div’s background which shows when you pan the map and before the map tiles have been loaded.

noResize [boolean]

Default value is false. If set to true it prevents the map from doing automatic resize checking.

Cursor behaviour

Finally there are a couple of properties to control how the cursor will look like. These are:


Sets the name or URL of the cursor that is displayed on a draggable object.


Sets the name or URL of the cursor that is displayed when an object is dragged.

Note: As of the time of writing these properties doesn’t seem to work properly. This will hopefully be fixed in a near future.

Live Demo

I’ve put together a Live Demo where you can try out some of the properties of the map and see how they affect it.


In this article we’ve examined the properties available when initializing a map in Google Maps API 3. These properties affect the look and behavior of the map. There are additional methods that can be used to alter these properties, but they will be covered in a future article. In the next article we will look at how to work with markers in the new API.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on


  1. When’s the next article coming? I’d very much like to see it, this series has been excellent so far.

  2. Thanks for the good article.
    Got better understanding on googlemap api v3 now.

  3. u doing well job… and thax for helping so kindly…

  4. This is a nice article, but when a use code like the examples in the demogallery :

    The navigation controller looks a bit weird in IE.

    How do i overcome this problem?

  5. Hi,

    Thanks for the tutorial. I am thinking of using v3 for Paragliding Map in the near future to provide better support for iPhone/Android users.


  6. Hey I want to incorporate google map on to my site so that people can find us easily . Please advise?

  7. Nice article, but having a darn hard time implementing the maxzoom/minzoom that existed before. Any thoughts?

  8. great article.. was having a little trouble with the disableDefaultUI [boolean] though because I was copying and pasting the heading title you have “diableDefaultUI [boolean]” it’s missing the s in disable

  9. Thanks for the article, look forward to the book(s) as well…

    One bit of anal retentiveness… in the first block of code in this article, Line 5, “SATTELITE” is spelled wrong…

  10. Jason: Thank you Jason! Also thanks for spotting the spelling error in this article, I’ve corrected that now.

  11. Hi there,

    I have a question for you with regards to using keyboard with Google maps v3.

    How can I tab into map and activate keyboard? I need to achieve the same behaviour as you’d clicked on it, but with keyboard only. I need this for accessibility reasons – all content needs to be accessible with a keyboard only.

    There is a solution in V2 using GKeyboardHandler, but nothing that I can find for v3.

    Can you point me in the right direction, please?

    Kind Regards,


  12. Gabriel – Does your book on Google Maps V3 cover creating a sidebar with multiple hyper links? If not, could you do an article on this? I have 180 names and would like to click on the name/address of the hyper link to open the info window for that marker. thanks.

  13. The navigationControl and navigationControlOptions you mention aren’t documented in the API reference. Do you know if this was maybe something they’ve removed from a later version but perhaps left in as an undocumented feature?


  15. HORIZONTAL_BAR is not working anymore… do you know why?

  16. fffffffffff

  17. How do I remove the Streetview icon and option?

  18. Venkateswarlu Abburi

    November 8, 2012 at 11:34 am

    Can i get current ZoomControlStyle so that i want to know whether my map is large or small?

Leave a Reply

Your email address will not be published.