Witold Rugowski on web20 wave with Ruby on Rails

Changing markers icons with Google Maps API

Posted on September 19, 2007 - Filed Under Google Maps, howto, JavaScript

If you're new here, you may want to subscribe to my RSS feed. You can also get updates by email Thanks for visiting!

Almost year ago I’ve wrote short info about how to change icons in markers placed already on map with Google Maps API. It is cumbersome method, since it requires to delete and create markers. It is problem when with markers are associated some event listeners, since they need to be recreated also.

But then was version 2.75 release of Google Maps API (I think it was around March 2007). Starting from then GMarker got setImage method, for changing images on already placed on map markers. But, somehow traffic to my old post is still notable, so I decided to write short example how setImage can be used.

       24 var new_icon = new GIcon()
       26 new_icon.image = ""
       27 new_icon.size = new GSize(16,16)
       28 new_icon.iconAnchor = new GPoint(8,9)
       29 new_icon.infoWindowAnchor = new GPoint(7,7)
       31 var opt
       32 opt = {}
       34 opt.icon = new_icon
       35 opt.draggable = false
       36 opt.clickable = false
       37 opt.dragCrossMove = true
       40 function load() {
       41   if (GBrowserIsCompatible()) {
       42     map = new GMap2(document.getElementById("map"));
       43     map.setCenter(new GLatLng(52.2419, 21.01), 4);
       44     map.addControl(new GLargeMapControl())
       45     map.addControl(new GMapTypeControl())
       47     GEvent.addListener(map, "click", function (marker, point) {
       48       if (!marker) {
       49         new_marker = new GMarker(point,opt)
       50         map.addOverlay( new_marker )
       51         markers.push(new_marker)
       52       }
       53     }
       54     )
       55   }
       56 }

First in lines 24-29 I create icon object. Next in lines 31-37 I create options for icon. In this example most important is line 34 when I use icon created in lines 24-29.

In lines 40-56 is function responsible for map creation. It also register one event listener, to create new markers on map. All markers are stored in markers array.

Now we can use this array to iterate through markers placed on map by user and change icon:

       58 function changeIcons() {
       59   for (i=0; i< markers.length; i++ ) {
       60     markers[i].setImage("")
       61   }
       62 }

setImage is method of marker object (thus is called on elements of array with markers created after click event). As argument it takes URL for new image. Notice, that icon object (and it's properties like draggable or clickable does not change). And that is it!

Go to to see setImage in action (code above is taken from this page).

When setImage does not work?

And now a little warning. setImage is meant to change only marker image, so if You did some fancy shadow (shadow property of GIcon) setImage does not update shadow property. setImage does not change printed image also, so if You expect users will print maps from Your application, this method won't work properly. If one of this true for Your application - You need to stick with delete/create method.

And finally - setImage was made available in API version 2.75, it is not available in stable version of API. As for today (2007.09.18), stable version is based on API in version 2.73.

Popularity: 89% [?]

Hits for this post: 212112

Similar Posts


22 Responses to “Changing markers icons with Google Maps API”

  1. Rafal "RaVbaker" Piekarski on September 19th, 2007 15:24

    One question.

    And what about changing icons into for example flags created from div with background and text inside?

    And is it possible to change the bubbles which often appear after clicking GIcon. ?

  2. NetManiac on September 19th, 2007 18:18

    I’m not sure what You want to achieve. Is first question about new icon and text over it?

    If so, use setImage and TLabel.

    And answer to second question is to use TLabel. :))

    Examples of TLabel in action You can see on my RNS site

  3. Pool rooms on January 9th, 2008 12:54

    any one can help me in changing the icon in pool rooms google map

  4. NetManiac on January 9th, 2008 13:00

    It seems to be more work to dig Your code. I could do it but not for free. If You are interested contact me via mail

  5. Noah on March 20th, 2008 0:40

    A question – how about if you have more than marker (e.g. not just the red marker, but a green one, too, and a blue one, etc…) Any idea how to update those markers as well?


  6. NetManiac on March 20th, 2008 1:19

    Maybe I don’t get the question – but If You have created markers with JS so You should have GMarker object with setImage method, which allow to change image.

  7. Richard on May 16th, 2008 0:05

    Hi NetManiac,

    Thanks to your post, I got setImage working nicely to change the colour of a marker on dragend.

    Now I’ve changed to use MarkerManager. The icon changes as before when it’s dragged, but reverts to its original image when you zoom in or out.

    Any ideas?


  8. NetManiac on May 17th, 2008 13:12

    There is no simple solution. Marker Manager does conserve resource usage not keeping all data for markers.

    You can try to trick it changing GIcon image for this marker – however if You use common GIcon object to initialize markers – changing icon will change icon in every marker built on this GIcon.
    So changing icon should be done in two steps:

    marker.setImage('URL') //changes current image
    marker.getIcon().image = 'URL' //changes image 'after refresh'

    You can see what I mean on modified example from this entry

    You can use different GIcon objects for each marker, but this would mean that GMarkerManager does not provide any savings on memory usage in Your case…

    Anyway – very good question. I hope it will help.

  9. Sebastian on June 10th, 2008 12:05

    Hi NetManiac,

    I tried to apply your lessons, but I’m not very good at this, and I can’t find what I’m doing wrong.

    Since I have many GEvent.addListener I don’t know how to make it work.

    Would you mind taking a look at it? ;o)


  10. NetManiac on June 13th, 2008 13:49

    I don;t know what are You trying to accomplish, and what exactly fails.

    with setImage You don’t have to worry about added listeners.

  11. Sebastian on June 13th, 2008 15:31

    Hi NetManic,

    I just wanted to change the Icon or the Marker.

    I think I forgot to put the URL of my test ;o)

    Normally, at the begining I get a grey map (which is what I want), with a Google Icon, now it’s not showing the Icon. Then when I click in “Show in Map”, it gives the correct map, but the Icon is the one from Google, but I don’t know how to change the Icon. If you check the Source, you’ll see I follow your steps, but I don’t know where I’m making a mistake.

    Thanks for your help


  12. NetManiac on June 13th, 2008 17:14

    I think You need to change line 63 to:

    var marker = new GMarker(center, {draggable: true, icon: new_icon});
  13. rd on September 11th, 2009 21:35

    yo thank you very much for this!
    Finally I got my custom markers working thanks to your article.


  14. Ajay on September 20th, 2009 17:32

    Thanks! Replacing my earlier code where i was deleting and then creating new markers. This is much simpler!

  15. Daryl Teo on October 4th, 2009 23:21

    Was searching for a way to do this, and came across here. Then I realised I was using V3 API and figured out how to do it.

    So just for anyone else who passes through, in V3, you simply use SetIcon for the Marker object, and pass through MarkerImage.


  16. Dan Moore on July 16th, 2010 17:28

    Awesome, thanks for the succinct, easy to understand answer.

  17. Google maps sszes jell cserje - Tudstr - Prog.Hu on July 26th, 2010 11:45

    Kramer auto Pingback[...] [...]

  18. Google Maps API Marker Icon question - [H]ard|Forum on August 29th, 2010 14:36

    Kramer auto Pingback[...]…oogle-maps-api [...]

  19. Add infowindow to marker and Change marker icon using Extjs and Gmappanel on September 16th, 2010 11:48

    Kramer auto Pingback[...] hi everyone!!! I got answers to my questions…. To change marker icon:…oogle-maps-api To add infowindow to marker (see post by moegal): [...]

  20. javascript - Change default markers for directions on google maps - Stack Overflow on July 4th, 2011 13:19

    Kramer auto Pingback[...] Reference: NetManiac – Changing markers icons with Google Maps API [...]

  21. [SOLVED] Add infowindow to marker and Change marker icon using Extjs and Gmappanel on February 1st, 2013 13:59

    Kramer auto Pingback[...] everyone!!! I got answers to my questions…. To change marker icon:…oogle-maps-api To add infowindow to marker (see post by moegal): [...]

  22. Anonymous on March 27th, 2013 16:22

    Kramer auto Pingback[...] [...]

Leave a Reply