Multiple InfoWindows

Question

I am currently developing a custom map, but have one issue. I have several InfoWindows, but only one of them is displaying for each marker. How do I get each marker to displ

Answer 1

I'll give an outline of what you could add to your page:

First, you probably want only one InfoWindow open at a time; if you really want multiple infowindows open at the same time then each infowindow needs its own variable name. Notice that they are all named infowindow right now.

What you must do for the single infowindow setup, is to set its content to change when a specific marker is clicked. For example:

google.maps.event.addListener(wesavegarMarker, 'click', function() {
  infowindow.setContent(contentStringwesavegar);
  infowindow.open(map,wesavegarMarker);
});

and repeat for the other markers.

As for the dropdown making the infowindows open, I learned from this page that you can trigger an "artificial" mouse click on a specific marker.

See the Demo

Assign an id to the <select> (I use "selectLocation") and values to each option:

<select id="selectLocation">
  <option>Select Location</option>
  <option value='bercolChoice'>Berklee College of Music</option>
  <option value='wentecChoice'>wentworth</option>
</select>

The string values assigned to the option values need to be matched with the marker variables, an object works well for this (seen here):

  var selectChoices = {
    bercolChoice: bercolMarker,
    wentecChoice: wentecMarker
  };

Finally the listener:

  google.maps.event.addDomListener(
    document.getElementById("selectLocation"), 'change',
    function() {
      google.maps.event.trigger(selectChoices[this.value], "click");
    });