Hiding the google map infowindow content when multiple infowindows open at a time

Question

I want to hide specific infoWindow content among multiple infowindows in google maps. If I open single infowindow it is working fine, but If I open multiple infowindows at a time content gets changed in the another infowindow.

Please find below code

 var map;
 var markers = [];

 function initMap() {
       map = new 
 google.maps.Map(document.getElementById('map_canvas'), {
 zoom: 14,
 center: new google.maps.LatLng(13.018057, 77.666794),
 mapTypeId: 'roadmap',
 disableDefaultUI: true
 });

  function addMarker(feature) {
  var marker = new google.maps.Marker({
  position: feature.position,
  map: map,
  type: feature.type,
  id:feature.id,
  description: feature.description,
  infoWindow:new google.maps.InfoWindow({})
});

 marker.addListener('click', function() {

  var content="<h5>"+marker.type+"</h5>"+
             "<p id='des'>"+marker.description+"</p>"
             google.maps.event.addListener(this.infoWindow, 
         'domready', function () {
             if(marker.id===1){
             document.getElementById("des").style.display="none";
             }
          });
           this.infoWindow.setContent(content);
            this.infoWindow.open(map,marker);

       });
        markers.push(marker);
    }



  var features = [

{
  position: new google.maps.LatLng(13.018057, 77.666794),
  type: 'type1',
  id: 1,
  description: 'welcome to Hyd'
}, {
  position: new google.maps.LatLng(13.015136, 77.647265),
  type: 'type2',
  id:2,
  description: ' welcome to Blr'
}, {
  position: new google.maps.LatLng(13.009970, 77.660088),
  type: 'type3',
  id:3,
  description: ' welcome to Mum'
      }

    ];

     for (var i = 0; i < features.length; i++) {
         addMarker(features[i]);
        }
        }

     $(document).ready(function() {
         initMap();
     });

Please find below jsfiddle

Answer 1

Simplest fix is to use this inside the marker click event listener function to refer to the marker (the marker variable is left pointing to the last marker processed in the loop), then for the domready callback you need to save it (as that, in the callback function's closure)

Also, you have multiple infowindows with the same element id in them, element ids have to be unique. One option is to append the marker id to the element id (i.e. des1 for marker/infowindow 1).

marker.addListener('click', function() {
  // save this for use inside domready event listener callback function
  var that = this;
  var content = "<h5>" + this.type + "</h5>" +
    "<p id='des"+this.id+"'>" + this.description + "</p>"
  // if need to wait for infowindow to open
  google.maps.event.addListener(this.infoWindow, 'domready', function() {
    console.log("that.id="+that.id)
    if (that.id === 1) {
      if (!!document.getElementById("des"+that.id))
        document.getElementById("des"+that.id).style.display = "none";
    }
  });
  this.infoWindow.setContent(content);
  this.infoWindow.open(map, this);
  // if domready has already fired
  if (that.id === 1) {
  if (!!document.getElementById("des"+that.id))
    document.getElementById("des"+that.id).style.display = "none";
  }

});

updated fiddle

code snippet:

var map;
var markers = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 14,
    center: new google.maps.LatLng(13.018057, 77.666794),
    mapTypeId: 'roadmap',
    disableDefaultUI: true
  });

  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      map: map,
      type: feature.type,
      id: feature.id,
      title: "" + feature.id,
      description: feature.description,
      infoWindow: new google.maps.InfoWindow({})
    });
    marker.addListener('click', function() {
      // save this for use inside domready event listener callback function
      var that = this;
      var content = "<h5>" + this.type + "</h5>" +
        "<p id='des" + this.id + "'>" + this.description + "</p>"
      // if need to wait for infowindow to open
      google.maps.event.addListener(this.infoWindow, 'domready', function() {
        console.log("that.id=" + that.id)
        if (that.id === 1) {
          if (!!document.getElementById("des" + that.id))
            document.getElementById("des" + that.id).style.display = "none";
        }
      });
      this.infoWindow.setContent(content);
      this.infoWindow.open(map, this);
      // if domready has already fired
      if (that.id === 1) {
        if (!!document.getElementById("des" + that.id))
          document.getElementById("des" + that.id).style.display = "none";
      }

    });
    markers.push(marker);
  }



  var features = [

    {
      position: new google.maps.LatLng(13.018057, 77.666794),
      type: 'type1',
      id: 1,
      description: 'welcome to Hyd'
    }, {
      position: new google.maps.LatLng(13.015136, 77.647265),
      type: 'type2',
      id: 2,
      description: ' welcome to Blr'
    }, {
      position: new google.maps.LatLng(13.009970, 77.660088),
      type: 'type3',
      id: 3,
      description: ' welcome to Mum'
    }

  ];

  for (var i = 0; i < features.length; i++) {
    addMarker(features[i]);
  }
}

$(document).ready(function() {
  initMap();
});

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>