In
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 agoogle.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 typegoogle.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 <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:
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
July 25, 2009 at 9:11 pm
When’s the next article coming? I’d very much like to see it, this series has been excellent so far.
February 3, 2010 at 3:07 am
Thanks for the good article.
Got better understanding on googlemap api v3 now.
February 10, 2010 at 7:00 am
u doing well job… and thax for helping so kindly…
February 12, 2010 at 11:17 pm
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?
March 5, 2010 at 3:30 pm
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
March 12, 2010 at 11:21 am
Hey I want to incorporate google map on to my site so that people can find us easily . Please advise?
May 28, 2010 at 8:01 pm
Nice article, but having a darn hard time implementing the maxzoom/minzoom that existed before. Any thoughts?
July 9, 2010 at 8:20 pm
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
July 9, 2010 at 9:56 pm
Jeff: Good catch Jeff, and thanks for letting me know! It has now been corrected.
July 12, 2010 at 3:32 am
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…
July 14, 2010 at 10:40 pm
Jason: Thank you Jason! Also thanks for spotting the spelling error in this article, I’ve corrected that now.
August 9, 2010 at 12:24 pm
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
September 14, 2011 at 5:15 pm
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.
December 16, 2011 at 1:09 pm
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?
December 19, 2011 at 10:51 am
In fact it’s been deprecated: http://code.google.com/apis/maps/documentation/javascript/controls.html#Adding_Controls_to_the_Map
“Note: the previously existing Navigation control has been deprecated and divided into separate Zoom and Pan controls.”
January 29, 2012 at 4:43 pm
IMAGERY DATE NOT PRINTING WHEN MAP IS PRINTED. HOW TO GET DATE OF IMAGERY SHOW UP ON MAP PRINTED
March 12, 2012 at 4:06 pm
HORIZONTAL_BAR is not working anymore… do you know why?
March 17, 2012 at 9:45 am
Actually when I try it out, it works just like before.
October 15, 2012 at 4:50 am
fffffffffff
October 29, 2012 at 3:28 pm
How do I remove the Streetview icon and option?
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?