Google Maps API 3 – Markers
Markers are the perfect way to put places of interest on a map and that’s probably one of the most used features in digital maps. In this article, which is the third in a series about Google Maps API 3, I will show you how to use them in Google Maps API 3.
If you aren’t already familiar with the map object, I recommend that you first read the two previous articles in this series.
The marker object
The marker object resides in the google.maps.Marker namespace and takes a single argument, options. Options is an object literal called Marker options that can have several properties of which two are required:
- map [Map]
Map is a reference to the map where you want to add the marker. - position [LatLng]
This property indicates the position of the marker and is of typegoogle.maps.LatLng
Lets start by creating a map and adding a regular marker with the standard look and behavior. If you’ve read the prior articles in this series you should already be familiar with the code that creates the map. Please note that I’ve used a somewhat more compact syntax here than in previous examples.
// Creating a map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(56.83, 15.16),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating a marker and positioning it on the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.8848, 14.7730),
map: map
});This code would result in a marker being added to the map, incidentally marking the place where I work. Note that the marker is immediately added to the map upon creation. So there’s no need, like in the old API, to explicitly add it to the map after it has been created.
Adding a tooltip
A common thing one might want to do is to add a tooltip to the marker. The tooltip is displayed when a user hovers with the mouse pointer over the marker. This is easily done by adding the property title to the marker options object.
Since this marker won’t be clickable I want to somehow indicate this. That is done by setting the property clickable to false. This results in that the mouse cursor won’t change on hover.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.8848, 14.7730),
map: map,
title: 'My workplace',
clickable: false
});Here’s how this will look like on the map.
Definition
- title [string]
Sets the tooltip of the marker. - clickable [boolean]
Defines whether the marker is clickable/draggable or not. If set tofalseit will not display a special mouse cursor on hover. Default value istrue.
Changing the default marker icon
Often we want to use a different marker than the default one. The API offers a simple way of doing this with the property icon. Icontakes either an URL pointing to an image or a MarkerIcon as its value. In this example I will use the more simpler, URL, and point it to this image.
This icon is taken from Nicolas Mollet’s map icon set at http://mapicons.nicolasmollet.com. There’s lots of similar icons that you can use.
Here’s the code for creating a marker with a custom marker icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.8848, 14.7730),
map: map,
title: 'My workplace',
clickable: false,
icon: 'http://google-maps-icons.googlecode.com/files/factory.png'
});Now the map and the marker will look like this:
There are some other properties for more advanced control of the marker icon, such as shadow and shape. Shadow defines the shadow cast by the icon and shape defines the clickable/draggable area of the marker but I will not explain them further in this article.
Definition
- icon [string|MarkerImage]
Defines the marker icon. It can either be an URL pointing to a suitable image or an object of type MarkerImage. - shadow [string|MarkerImage]
Sets the shadow of a marker icon. Takes either an URL or aMarkerImageas its value. - shape [object]
Defines the clickable/draggable area of a marker. It takes an object as its value. The object contains coordinates that define a polygon much the same way an imageMap is defined. - flat [boolean]
If set totruedisables the shadow of the marker.
Note: By explicitly setting icon, the property shadow is reset. So even if we don’t provide shadow with a value, it will not inherit the shadow of the default marker. I could be argued that in this case the property flat should be set to true, but it’s not necessary for the marker to not have a shadow.
Other properties
Additionally there are a few other properties you can use to control the marker.
- cursor [string]
This property changes the way the cursor look when the mouse pointer hovers over the marker. - visible [boolean]
This property determains if the marker should be visible or not. Set it tofalseto make the marker invisible. The default value istrue. - zIndex [number]
Sets the stack order of markers. Could be handy if several markers sits on top of each other.
Live demo
Be sure to checkout the Live Demo to see the code shown in this article in action.
Other resources
For a full and most recent definition of the marker object check out the API reference. Also check out the section about overlays in the documentation.
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
Pingback: Añadir marcadores a nuestro mapa « Tutorialitos
Pingback: 14?Google???JavaScript??
Pingback: Using Google Map – Javascript Resources