Multiple distinct infoWindows on google map

Question

I want to create for each marker on google maps an own window. I tried this:

// Create first marker and window
marker = new google.maps.Marker({
  position: myLatlng,
  map: map
});
contentString = '<div>BOX A</div>';
var infowindow = new google.maps.InfoWindow({
  content: contentString
});
marker.addListener('click', function() {
  infowindow.open(map, marker);
});

// Create second marker and window
myLatlng = new google.maps.LatLng(12.1364,-86.2514);
marker = new google.maps.Marker({
  position: myLatlng,
  map: map
});
contentString = '<div>BOX B</div>';
infowindow = new google.maps.InfoWindow({
  content: contentString
});
marker.addListener('click', function() {
  infowindow.open(map, marker);
});

and unfortunately, only the second marker has a window which contains Box B. If I click on the first marker then the window from the second marker with Box Bpops up. I do not understand why this happens.

I noticed that each marker gets his own window if I use a new variable for the second marker and the second window like this:

              // Create sceond marker and window
              myLatlng = new google.maps.LatLng(12.1364,-86.2514);
              marker2 = new google.maps.Marker({
                position: myLatlng,
                map: map
              });
              contentString = '<div>BOX B</div>';
              infowindow2 = new google.maps.InfoWindow({
                content: contentString
              });
              marker2.addListener('click', function() {
                infowindow2.open(map, marker2);
              });

But I am completely puzzled why do I need to use new variables. Why can't I overwrite the old variables?

---

Note: This question is about how to get multiple distinct infoWindows and is therefore different from Have just one InfoWindow open in Google Maps API v3 and Google Maps infoWindow only loading last record on markers

---

Here is the complete code:

    <div id="map" style='height:300px'></div>
           <script>
             function initMap() {

              // init map
              var mapDiv = document.getElementById('map');
              myLatlng = new google.maps.LatLng(52.4955,13.3437);
              var map = new google.maps.Map(mapDiv, {
                scrollwheel: false,
                center: myLatlng,
                zoom: 1
              });

              var myLatlng, marker, infowindow,contentString;

              // Create first marker and window
              marker = new google.maps.Marker({
                position: myLatlng,
                map: map
              });
              contentString = '<div>BOX A</div>';
              var infowindow = new google.maps.InfoWindow({
                content: contentString
              });
              marker.addListener('click', function() {
                infowindow.open(map, marker);
              });

              // Create second marker and window
              myLatlng = new google.maps.LatLng(12.1364,-86.2514);
              marker = new google.maps.Marker({
                position: myLatlng,
                map: map
              });
              contentString = '<div>BOX B</div>';
              infowindow = new google.maps.InfoWindow({
                content: contentString
              });
              marker.addListener('click', function() {
                infowindow.open(map, marker);
              });
             }
             </script>

Answer 1

At the point when your first marker click handler

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

is called, your infowindow variable points to the second infowindow created, since you use the same variable for both infowindows:

var infowindow = new google.maps.InfoWindow(..
infowindow = new google.maps.InfoWindow({

There are questions here at SO like this, this and this which discuss the same issue. It might not look like the same problem at first glance, but your problem is with scopes.

Your problem can be easily resolved by using two different variables, or better create a reusable function:

       <script>

         function addMarkerWithInfowindow(map, marker_position, infowindow_content){
              var myLatlng, marker, infowindow,contentString;
              marker = new google.maps.Marker({
                  position: marker_position,
                  map: map
              });
              contentString = infowindow_content;
              infowindow = new google.maps.InfoWindow({
                  content: contentString
              });
              marker.addListener('click', function() {
                 infowindow.open(map, marker);
              });
         }

         function initMap() {

          // init map
          var mapDiv = document.getElementById('map');
          myLatlng = new google.maps.LatLng(52.4955,13.3437);
          var map = new google.maps.Map(mapDiv, {
            scrollwheel: false,
            center: myLatlng,
            zoom: 1
          });


          addMarkerWithInfowindow(map, new google.maps.LatLng(52.4955,13.3437), '<div>BOX A</div>');
          addMarkerWithInfowindow(map, new google.maps.LatLng(12.1364,-86.2514), '<div>BOX B</div>');

         }
         </script>

Now the variables inside the handler:

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

are tied to the scope of the function, so will always point to the correct infowindow instance. I suggest you to read more about javascript scopes to understand the issue, there are some links in the answers of the questions I linked to some nice articles about the issue (for example this one or this one.