In usability we trust

Google Maps Api 3 – Markers

This article is part 3 of 4 in the series Google Maps API 3

Google Maps API 3

  1. Google Maps API 3 – The basics
  2. Google Maps API 3 – Map settings
  3. Google Maps Api 3 – Markers
  4. Google Maps Api 3 – InfoWindows

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 type google.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 to false it will not display a special mouse cursor on hover. Default value is true.

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://code.google.com/p/google-maps-icons/. There’s lots of similiar 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 a MarkerImage as 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 to true disables 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 to false to make the marker invisible. The default value is true.
  • 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.

Note: If you liked this article you might enjoy reading a beta chapter about how to use markers from my upcoming book on Google Maps API v3.

Share this article

  • del.icio.us
  • Twitter
  • Facebook
  • LinkedIn
  • Digg
  • StumbleUpon
  • Google Bookmarks
  • Mixx
  • Print

This article was published on Tuesday, July 28th, 2009 in Articles.

Comments

RSS feed for comments on this post

1. August 5th, 2009 at 14.42 by Nico Mollet

Hello Gabriel, I am Nicolas Mollet creator of Google maps icons project (http://code.google.com/p/google-maps-icons/)

Thanks for the backlink.
Do you know any public maps (your maps ?) that use this icon collection. I am creating a list of sites using thoses icons.

You may help me on something else.
I am desperate to find how to use GM Api 3 with something like :

position: new google.maps.Address(123, Rocking Street, New York, USA),

There are places I don’t know the latitude&longitude. How can I pass the full address to the API ?
All the tutorials I find work with the coordinates, that I don’t have…
Thanks if you can help.

2. August 5th, 2009 at 19.26 by Gabriel Svennerberg | Author comment

Hi Nicolas,

No I’m afraid I don’t know of any sites that uses your icons. I will however, probably use them in a few examples in my upcoming book, where I of course will give you credit. I really like them and it’s nice to see that the collection is growing. Good job!

When it comes to getting the coordinates for an address, you need to use the GeoCoding Service. Check out the documentation to see how it’s used.

3. August 14th, 2009 at 11.34 by trisna

Hello everybody ,I am a php programmer
can you help me out by giving me a script of google map in which it will point multiple addresess dynamically.

4. August 24th, 2009 at 12.38 by Lorenzo

Hello Gabriel, I am Lorenzo Emanuelli; tnx for this very useful blog. I have a little problem: Google Maps Api 3 work very well on firefox for windows and mac, but on ie7 i can’t view the map, using the same code ! Have you an idea of which problem coluld be?
Tnx for your attention.

Lorenzo

5. September 9th, 2009 at 16.55 by Nancy B

Thank you so much for this. Like Lorenzo I had trouble with IE7 then I looked at the page source on your example and realized I had some mistakes in the javascript which I corrected. Hope that helps Lorenzo.

My site is focused on New England vineyards – I am trying to raise awareness and get people to visit them. The maps are very important, and with your help Gabriel, I can now put tooltips and other options.

As a graphic designer being able to follow your examples is great!
– Nancy

6. October 17th, 2009 at 15.27 by atkins

how to add multiple markers without separate entries like:


marker1 = new google.maps.Marker({ position: latlng1, map: myMap, title:'wdw' });
marker2 = new google.maps.Marker({ position: latlng2, map: myMap, title:'wdw' });

7. October 20th, 2009 at 15.39 by Than Polas

Hello Gabriel,
Do you have a solution for v3 to automatically adjust the zoom level so that it includes all the markers displayed?

e.g. i have multiple markers scattered on a map and i have to decide which zoom level to use… how can i do that in v3?

Thankyou

8. October 20th, 2009 at 21.39 by Gabriel Svennerberg | Author comment

Than Polas: You can use the LatLngBounds object for this. Simply extend it with the LatLng of each marker you add to the map and then call the fitBounds() method of the map object and pass it the LatLngBounds object.

Assuming that myPositions is an array containing LatLng objects this is how it’s done:

// Create a LatLngBounds object
var bounds = new google.maps.LatLngBounds();

for (var i = 0; i < myPositions.lenght; i++) {
  // Insert code to add marker to map here

  // Extend the LatLngBound object
  bounds.extend(myPositions[i]);
}
map.fitBounds(bounds);

I hope that helps!

9. October 24th, 2009 at 17.06 by Daniel

Hello Gabriel,

I am trying to incrust text (API v3) in the marks example, will be welcome any suggestions that you could give me in this topic.

And congratulations for this tutorial so practical and easy to deal

In advance thank you,

Regards.

10. December 7th, 2009 at 18.22 by Andy Clark

Hi Gabriel

Nice articles on API 3. Have you come across any examples of using API 3 with ASP.NET 3.5? The sample javascript executes without errors but nothing is displayed. The HTML examples work OK and as far as I can see the ASP.NET renders the HTML in the same way.

I don’t want to bother you unnecessarily but I can post some examples if you’re interested.

Many thanks

Andy

11. December 7th, 2009 at 19.28 by Gabriel Svennerberg | Author comment

Andy Clark: Hi Andy and thanks!

I haven’t seen any examples using ASP.NET 3.5 but that shouldn’t make any difference.

Make sure that you have dimensions set for the containing element of the map. In my examples it’s called <div id="map"></div>. Set its dimensions in your stylesheet like this:

#map {
  width: 600px;
  height: 400px;
}

If that’s not the problem, post a link and I will try to take a quick look at it.

12. December 13th, 2009 at 6.13 by David S

Hi,

Nice article. So far, I haven’t been able to find any API calls in v3 to duplicate the map.clearOverlays() function in v2. Are you aware of any way to remove markers?

Thanks,
David

13. December 27th, 2009 at 15.27 by Sandro Franchi

Hi Gabriel, a question. I’m using MapIconmaker in one of my apps (using API V2.x) just because I need to specify marker colors based in some attribute. I’m willing to migrate to V3, but, is MapIconMaker compatible with V3 or there is any other way (perhaps native) to specify the markers color (and size).

Thanks in advance,

Sandro Franchi.

14. December 28th, 2009 at 10.20 by Gabriel Svennerberg | Author comment

David: There’s no clearOverlays() method in v3 so you have to manually keep track of your markers yourself. One way of doing that is to keep them in an array. To remove all the markers from the map you then loop through the array and remove them one by one.

See the Google Maps API v3 forum for an example on how to do this.

Sandro: MapIconMaker is currently not available for v3 but I know that at least one person is thinking about porting it to v3. Unfortunately there’s no native way of changing colors or size of the icons in v3 either.

Check out the thread about MapIconMaker in the Google Maps API v3 forum.

15. January 20th, 2010 at 19.25 by Gilles Tanguay

Hi,

Is is possible to put miltiple and different markers on a google maps ?? I want to be able to place different markers (like the logo of the company) on the map; every company has a different logo and I want to be able to look at them easily.

Thanks !

Gilles

16. January 20th, 2010 at 20.17 by Gabriel Svennerberg | Author comment

Gilles: That’s entirely possible. You just need to create a new MarkerImage for each marker type and pass it as the value for the marker objects icon property. (or just pass an url to the appropriate image to the icon property)

17. February 17th, 2010 at 17.08 by Enrico

Thanks very much Gabriel, it’s long time i was looking such a article so simple and clear!

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>