Question

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.

Answer 1

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