CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
HondaKillrsx
HondaKillrsx

Reputation: 349

Changing the Google Maps Marker HTML after a function is ran

So I'm trying to figure out a way to change the HTML of Google Maps V3 markers after they have been pulled from the database but before they are pushed up to the array.

When getFishing() is called, I'd like to run convertRate(rate) so that if the rate variable is equal to two or more, it shows a picture which is within the HTML of the Markers themselves. I've tried putting it in the bindInfoWindow4() and I've tried several places within the getFishing() function with no success. Has anyone done this before? Is it possible after the markers have been pushed up to the fishArray?

     function getFishing() {
        fishingUrl("XML_Fishing.php", function (data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var id = markers[i].getAttribute("id");
                var title = markers[i].getAttribute("title");
                var rate = markers[i].getAttribute("rate");
                var Fishhtml = "<img id='1star' src='images/1star.png' style='visibility:hidden'>";
                var icon = FishingIcon;
                var Fishmark = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon
                });
                fishArray.push(Fishmark);
                bindInfoWindow4(Fishmark, map, Fishinfo, Fishhtml);

            }
        });
    }
    function convertRate(rate) {
        if (rate >= 2) {
            document.getElementById("1star").style.visibility = 'visible';
        }
    }

    function bindInfoWindow4(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
        });
    }

Upvotes: 3

Views: 4413

Answers (1)

geocodezip
geocodezip

Reputation: 161324

If you change your click listener to display the HTML saved in a member variable of the marker, you can change it at any time. If the InfoWindow is open, you may want to close it and reopen it (or update its content in place, but that gets more complicated).

Something like:

  function bindInfoWindow4(marker, map, infoWindow, html) {
      marker.myHtmlContent = html;
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(marker.myHtmlContent);
        infoWindow.open(map, marker);
      });
  }

Then update the content by changing the value in marker.myHtmlContent. To make it visible, somthing like this:

  marker.myHtmlContent = "<img id='1star' src='images/1star.png' style='visibility:visible'>";

Upvotes: 11

Related Questions