How to display an image in the marker information window?

Question

How to display an image in the marker information window?

Navigation

#1 by (2 votes)

2

When you click on a marker created with the Google Maps API, you can add an info window, which is what the code below does:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent("image.png");
      infowindow.open(map, marker);
    }
  })(marker, i));

How it is played:

However, I would like instead of displaying the text of the image in the balloon, image.png , I would like to see the image in fact. How do I display an image in the marker information window?

javascript google-maps

asked by anonymous 27.04.2017 / 16:34

1 answer

Change label color according to screen status Apply the CSS of a child of element A to another element B

score 2 · Accepted Answer

According to doc from google, you can simply put tag the image into a string and pass it to content of infowindow .

ex:

var contentString = '<img src="image.png">';

var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

Following is a fiddle available in the documentation on how to do this.