JavaScript API: how do I add an Info Window to multiple markers on Google Maps?

Question

In my project I have a map which contains 5 different markers: I would like to add an Info Window (with a pic and some text) to each marker when you click on it with the mouse. I have tried to follow the indications on developers google maps Js api but I am not able to add the Info Window to my JS code below.

var locations = [
  ["Produkti 24", 55.807486804134314, 37.57894602052835],
  ["TZ Taganka", 55.74093035131738, 37.65759916946915],
  ["TZ Olympic Plaza", 55.780406091354706, 37.63186787199648],
  ["TZ Nautilyus", 55.75928138001903, 37.624754384813336],
  ["TZ Korabl", 55.71020266934412, 37.62031372713951],
];

function initMap() {
  var myLatLng = { lat: 55.7637079, lng: 37.6236902 };

  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: myLatLng,
  });

  var count;

  for (count = 0; count < locations.length; count++) {
    new google.maps.Marker({
      position: new google.maps.LatLng(
        locations[count][1],
        locations[count][2]
      ),
      map: map,
      title: locations[count][0],
    });
  }
}

#map {
  height: 350px;
  width: 80%; 
  margin: 3rem auto 3rem auto;
}

.map-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-title {
  font-size: 2rem;
  margin-top: 1.2rem;
}

<body>
 <section class="map-box" id="map-box" >
      <h2 class="map-title">Where we are</h2>
      <div id="map">
      </div>
    </section>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMjHKMIiZiqHCrcIOe-iH9MtiZ-FpdefA&callback=initMap"></script>
  </body>

score 0 · Answer 1 · answered Mar 31 '23 at 20:41

First you need a div containing your content and image. Going off the documentation - contentString would just be a variable storing a string of HTML where you can create your image and text. Maybe you can store your contentString in another array and reference it in your locations array.

const locationOneContentString ='<div id="contentOne">' + '<div id="siteNoticeOne">' +...

const locationTwoContentString ='<div id="contentTwo">' + '<div id="siteNoticeTwo">' +...

etc.

Put these into a new array:

var locationContentStrings = [locationOneContentString, locationTwoContentString...]

Then add this array into your existing array:

var locations = [["Produkti 24", 55.807486804134314, 37.57894602052835, locationContentStrings[0],["TZ Taganka", 55.74093035131738, 37.65759916946915],locationContentStrings[1]

Assign a variable to each new marker then you will need to create a click event listener to attach onto each newly created marker.

var marker = new google.maps.Marker({
     position: new google.maps.LatLng(
         locations[count][1],
         locations[count][2]
     ),
     map: map,
     title: locations[count][0], 
});

Then create a new instance of the InfoWindow class

var infowindow = new google.maps.InfoWindow({
    content: locations[count][3],
});

And finally use a click function to activate the infowindow on the marker you've just created (all within the for loop)

marker.addListener('click', function() {
    infowindow.open({
        anchor: marker,
        map,
    });
});

For reference I referred to these two pages in the Google docs: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple https://developers.google.com/maps/documentation/javascript/reference/info-window

Hello thanks a lot for your reply. I have tried but I am not able to add your code examples into my JS code.. can you please help posting all code at once? Sorry again but I am a newbie in JS! — Bigivan, Apr 15 '23 at 17:04

JavaScript API: how do I add an Info Window to multiple markers on Google Maps?

1 Answers1