0

I need to automatically change Google Maps marker icons based on the inner content of an automatically updating DOM element.

I've looked at the documentation for addListener and addDomListener, but it's all mouseovers and clicks and stuff. I need it to detect a change in the pure HTML content of the element in question, and if that value meets certain conditions, change the marker's icon based on it.

Here is the code I am using:

infowindow=new google.maps.InfoWindow();
for (i=0;i<buildings.length;i++){
    marker=new google.maps.Marker({
        position:new google.maps.LatLng(buildings[i][4],buildings[i][5]),
        map:map,
        shadow:shadow,
        icon:greenIcon,
        title:buildings[i][0]+" \n"+buildings[i][1],
        zIndex:buildings[i][6]
    });
}

I am thinking about adding a setInterval in conjunction with jQuery to force the buildings[i][7] array value (not included above) to equal the content of the div in question, and then running a few conditional statements to determine if it meets the right criteria for changing the icon of the marker.

But after that, I'm lost about how to get the marker to actually change based on the dynamically updating value.

InterfaceGuy
  • 139
  • 2
  • 14

2 Answers2

2

To set the icon associated with the Marker, try out the Marker.setIcon function. It accepts one parameter, which may be either:

  1. A string that contains the relative location of the icon image file (as in your code), OR -
  2. A MarkerImage, which gives you more control (anchor, origin, size, etc.) over how the icon image is displayed
Sean Mickey
  • 7,618
  • 2
  • 32
  • 58
  • Thanks. This is part of what I was looking for (I also found it at http://stackoverflow.com/questions/1941260/google-maps-api-v3-how-do-i-dynamically-change-the-marker-icon )... but is there a way of detecting the change of the DOM element (which will trigger the change), or am I just going to have to put it on a `setInterval`? I'd rather not do that if I don't have to. – InterfaceGuy May 01 '12 at 19:20
  • Well, since there isn't any way to be notified of element changes, you are going to have to either: poll the element (using `setInterval` if you like) or use the data binding mechanisms we discussed on your other question: http://stackoverflow.com/q/10355852/1314132. – Sean Mickey May 01 '12 at 19:38
  • Thanks Sean. Your help has been indispensable. :) – InterfaceGuy May 02 '12 at 16:20
0

from the google api documentation

  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
  map.addOverlay (beachMarker );
NDBoost
  • 10,184
  • 6
  • 53
  • 73
  • Will this lay an entirely new marker on top of the old one? I don't want that; I want to switch out the one I already have. – InterfaceGuy Apr 27 '12 at 18:53