Changing markers icons with Google Maps API

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()
       25
       26 new_icon.image = "http://nhw.pl/images/cross.png"
       27 new_icon.size = new GSize(16,16)
       28 new_icon.iconAnchor = new GPoint(8,9)
       29 new_icon.infoWindowAnchor = new GPoint(7,7)
       30
       31 var opt
       32 opt = {}
       33
       34 opt.icon = new_icon
       35 opt.draggable = false
       36 opt.clickable = false
       37 opt.dragCrossMove = true
       38
       39
       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())
       46
       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("http://nhw.pl/images/cancel.png")
       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 http://nhw.pl/download/setimage.html 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.

This entry was posted in Uncategorized by . Bookmark the permalink.

22 thoughts on “Changing markers icons with Google Maps API

  1. 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. 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. 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?

    Thanks!

  4. @Noah
    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.

  5. 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?

    Thanks

  6. @Richard
    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 http://nhw.pl/download/setimage_mm.html

    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.

  7. 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)

    Thanks,
    Sebastian

  8. @Sebastian
    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.

  9. Hi NetManic,

    I just wanted to change the Icon or the Marker.

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

    http://allmybookings.com/givesyourthelatlngGOOD.php

    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

    Sebastian

  10. @Sebastian
    I think You need to change line 63 to:

    var marker = new GMarker(center, {draggable: true, icon: new_icon});
    
  11. yo thank you very much for this!
    Finally I got my custom markers working thanks to your article.

    cheers

  12. 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.

    Cheers

  13. Pingback: Google maps ?sszes jel?l? cser?je - Tud?st?r - Prog.Hu

  14. Pingback: Google Maps API Marker Icon question - [H]ard|Forum

  15. Pingback: Add infowindow to marker and Change marker icon using Extjs and Gmappanel

  16. Pingback: javascript - Change default markers for directions on google maps - Stack Overflow

  17. Pingback: [SOLVED] Add infowindow to marker and Change marker icon using Extjs and Gmappanel

  18. Pingback: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *

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