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:

  • ROADMAP
    A normal map
  • SATELLITE
    Satellite images
  • HYBRID
    Displays satellite images with roads and labels overlayed on it
  • TERRAIN
    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.

mapTypeControlOption

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.

  • DEFAULT
    The DEFAULT value will vary the look of the mapTypeControl depending of the size of the window and possibly other factors.
  • HORIZONTAL_BAR
    This option will display the standard bar.
  • DROPDOWN_MENU
    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.

navigationControlOptions

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

  • DEFAULT
    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.
  • SMALL
    This is the small control that only lets you to zoom the map.
  • ANDROID
    This control looks like the SMALL one, but is supposed to be specifically tailored for the Android mobile platform.
  • ZOOM_PAN
    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:

scaleControlOptions

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

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 behavior

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

draggableCursor

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

draggingCursor

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.

Conclusion

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 Amazon.com

About the author

Gabriel Svennerberg is an UX Designer and FrontEnd Developer living in Sweden. When he's not busy designing or building applications at Meetod, he writes about UX Design and all things web on In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress. Gabriel on Google+
  • Josh

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

  • http://www.bmlee.com brian

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

  • vish

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

  • Pierre

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

    http://code.google.com/intl/nl/apis/maps/documentation/v3/demogallery.html

    The navigation controller looks a bit weird in IE.

    How do i overcome this problem?

  • http://www.ParaglidingMap.com Craig Payne

    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.

    Craig

  • kb

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

  • Jamie

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

  • jeff

    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

    • http://www.svennerberg.com Gabriel Svennerberg

      Jeff: Good catch Jeff, and thanks for letting me know! It has now been corrected.

  • http://www.meccmap.com Jason

    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…

  • http://www.svennerberg.com Gabriel Svennerberg

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

  • Dmitri

    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,

    Dmitri

  • Carl

    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.

  • Pingback: 14?Google???JavaScript??

  • Duncan Cumming

    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?

  • Sivapasadb

    IMAGERY DATE NOT PRINTING WHEN MAP IS PRINTED. HOW TO GET DATE OF IMAGERY SHOW UP ON MAP PRINTED

  • Rodrigo Roman

    HORIZONTAL_BAR is not working anymore… do you know why?

    • http://www.svennerberg.com Gabriel Svennerberg

      Actually when I try it out, it works just like before.

  • ffffffffff

    fffffffffff

  • airscool

    How do I remove the Streetview icon and option?

  • Venkateswarlu Abburi

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