Adding an onclick event to an image inside a Google Maps InfoWindow

Question

I'm trying to add an onclick event to an image inside an InfoWindow, so that when the image is clicked, a Javascript function is called.

"name" is the name of the place and "image" is the image location. They both show up fine when I click on the marker but nothing happens when I click on the image.

My current code is:

var infowindow = new google.maps.InfoWindow({content: name + "</br>" + "<img
onclick='output()' src='images/" + image +     
"'style=height:100px;width:100px;float:none;>"});
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });
    function output()
    {
        $("#output").html("yes");
    }

And the HTML:

<h1>My First Google Map</h1>

<div id="map" style="width:60%;height:500px"></div>
<div id="output"></div>



</body>

The posted code works for me ([fiddle](http://jsfiddle.net/geocodezip/L2tf6sru/4/)). Please provide a [mcve] that demonstrates your issue. — geocodezip, Nov 17 '16 at 14:39

score 0 · Answer 1 · edited May 23 '17 at 10:30

That's not my answer, but might can help you, in this topic show how to trigger this a event on google maps Trigger event with infoWindow or InfoBox on click Google Map API V3 :

   function addMarkers()
    {
        var marker, i;
        var infowindow = new google.maps.InfoWindow({
            disableAutoPan: true
          ,isHidden:false
          ,pixelOffset: new google.maps.Size(-10, -10)
          ,closeBoxURL: ""
          ,pane: "mapPane"
          ,enableEventPropagation: true
        });
        for (var i = 0; i < cityList.length; i++)
        {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                map: map,
                id: i,
                title: cityList[i][0]
            });

            var boxText = document.createElement("div");
            boxText.id = i;
            boxText.className = "labelText" + i;
            boxText.innerHTML = cityList[i][0];
            boxList.push(boxText);

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                var contentString = '<div id="infoWindow">'
                    +'<div id="bodyContent">'
                    +'<p>'
                    + "This location is:<br>"
                    + marker.title
                    +'</p>'
                    +'</div>'
                    + '</div>';

                return function() {
                    infowindow.setContent(boxList[this.id]);
                    infowindow.open(map, marker);
                }
                })(marker, i)); //end add marker listener

                google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
                        return function() {
                          alert('clicked ' + cityList[i][0])
                        }
                      })(marker, i));
            } //endfor              
        }//end function

Adding an onclick event to an image inside a Google Maps InfoWindow

1 Answers1