Google Maps API v3 How do I dynamically change the marker icon

Question

Using Google Maps API v3  how do I programmatically change the marker icon   What I would like to do is  when someone hovers over a link - to have the corresponding marker icon on the map change colors to denote the marker in question   Essentially  the same function as what Roost does   When you hover over a home listing on the left  the corresponding marker on the right changes color

User · Answer

This thread might be dead  but StyledMarker is available for API v3  Just bind the color change you want to the correct DOM event using the addDomListener   method  This example is pretty close to what you want to do  If you look at the page source  change   google maps event addDomListener document getElementById  changeButton    click  function       styleIcon set  color    00ff00      styleIcon set  text   Go          to something like   google maps event addDomListener  mouseover  function       styleIcon set  color    00ff00      styleIcon set  text   Go          That should be enough to get you moving along   The Wikipedia page on DOM Events will also help you target the event that you want to capture on the client-side   Good luck  if you still need it

User · Answer

You can try this code       lt script src  http   maps googleapis com maps api js  gt  lt  script gt   lt script type  text javascript  src  http   google-maps-utility-library-v3 googlecode com svn trunk infobox src infobox js  gt  lt  script gt    lt script gt       function initialize                 var map          var bounds   new google maps LatLngBounds            var mapOptions                                 zoom  10                              mapTypeId  google maps MapTypeId ROADMAP                                         map   new google maps Map document getElementById  mapDiv    mapOptions           var markers                   title-1     lt img style  width 100    src  canberra hero image jpg  gt  lt  img gt    51 508742  -0 120850    lt p gt  Hello - 1  lt  p gt                   title-2     lt img style  width 100    src  canberra hero image jpg  gt  lt  img gt    51 508742  -0 420850    lt p gt  Hello - 2  lt  p gt                   title-3     lt img style  width 100    src  canberra hero image jpg  gt  lt  img gt    51 508742  -0 720850    lt p gt  Hello - 3  lt  p gt                   title-4     lt img style  width 100    src  canberra hero image jpg  gt  lt  img gt    51 508742  -1 020850    lt p gt  Hello - 4  lt  p gt                   title-5     lt img style  width 100    src  canberra hero image jpg  gt  lt  img gt    51 508742  -1 320850    lt p gt  Hello - 5  lt  p gt                        var infoWindow   new google maps InfoWindow    marker  i          var testMarker               var status               for  i   0  i  lt  markers length  i                            var title   markers i  0               var loan   markers i  1               var lat   markers i  2               var long   markers i  3               var add   markers i  4                 var iconGreen    img greenMarker png     green marker             var iconRed    img redMarker png         red marker              var infoWindowContent   loan     n    placeId   add               var position   new google maps LatLng lat  long               bounds extend position                marker   new google maps Marker                   map  map                  title  title                  position  position                  icon  iconGreen                             testMarker i    marker              status i    1              google maps event addListener marker   click     function toggleBounce  i status testMarker                                 return function                                          infoWindow setContent markers i  1  markers i  4                        if  status i      1                                                 testMarker i  setIcon iconRed                           status i    0                                             for  var k   0  k  lt   markers length   k                                                   if k    i                                                        testMarker k  setIcon iconGreen                               status i    1                                                                       infoWindow open map  testMarker i                                      i status testMarker                map fitBounds bounds                     var boundsListener   google maps event addListener  map    bounds changed   function event                        this setZoom 8               google maps event removeListener boundsListener                         google maps event addDomListener window   load   initialize     lt  script gt    lt div id  mapDiv  style  width 820px  height 300px  gt  lt  div gt

User · Answer

You can also use a circle as a marker icon  for example     var oMarker   new google maps Marker       position  latLng      sName   Marker Name       map  map      icon            path  google maps SymbolPath CIRCLE          scale  8 5          fillColor    F00           fillOpacity  0 4          strokeWeight  0 4              and then  if you want to change the marker dynamically  like on mouseover   you can  for example     oMarker setIcon               path  google maps SymbolPath CIRCLE              scale  10              fillColor    00F               fillOpacity  0 8              strokeWeight  1

User · Answer

The GMaps Utility Library has a plugin called MapIconMaker that makes it easy to generate different marker styles on the fly   It uses Google Charts to draw the markers    There s a good demo here that shows what kind of markers you can make with it

User · Answer

Call the marker setIcon  newImage png      Look here for the docs   Are you asking about the actual way to do it  You could just create each div  and a add a mouseover and mouseout listener that would change the icon and back for the markers

[javascript] Google Maps API v3: How do I dynamically change the marker icon?

Examples related to javascript

Examples related to google-maps

Examples related to google-maps-api-3