Open only one infowindow at a time google maps

Question

Im trying to create a google map with multiple markers that allows only one info window at a time. The markers are the locations of IP cameras and they are fetched through ruby. I've read loads of answers to similar questions whereby the solution is to create only one info window and re-use it.

I have tried to implement the solutions from a number of other questions but I can't get it to work.

  $(document).ready(function () {
// execute
(function () {
  // map options
  var options = {
    zoom: 2,
    center: new google.maps.LatLng(25, 10), // centered US
    mapTypeControl: false,
    streetViewControl: false
  };

  // init map
  var map = new google.maps.Map(document.getElementById('map-canvas'), options);

  // set multiple marker
  <% @cameras.each do |c| %>
  // init markers
    <% if c.deep_fetch(:location) {} != nil %>

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(<%= c.deep_fetch(:location, :lat) {} %>, <%= c.deep_fetch(:location, :lng) {} %>),
    map: map,
    title: 'Click Me '
  });

  // process multiple info windows
  (function (marker) {
    // add click event
    google.maps.event.addListener(marker, 'click', function () {
      infowindow = new google.maps.InfoWindow({
        content: "<%= preview(c, true) %>"+
            '<h5><%= c["name"] %></h5>'+
            '<p><a href="/publiccam/<%= c['id'] %>">View Camera</a></p>'

      });

      infowindow.open(map, marker, this);
    });
  })(marker);
  <% end %>
  <% end %>

})();
});

Is it possible to create just one info window due to the way I am creating an info window for each camera with <% @cameras.each do |c| %>?

Answer 1

You should create only one instance of the infowindow object and use the setContent() method.

First create the infowindow object:

var infowindow = new google.maps.InfoWindow();

Then where you create your marker and add the click event listener:

google.maps.event.addListener(marker, 'click', function () {

    infowindow.setContent('set the infowindow content here');
    infowindow.open(map, marker);
});

Hope this helps.

var map = null;
var infowindow = new google.maps.InfoWindow();

function initialize() {

  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787, -79.359741),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // Add markers to the map
  // Set up three markers with info windows

  var point;

  point = new google.maps.LatLng(43.65654, -79.90138);
  createMarker(point, 'This is point 1');

  point = new google.maps.LatLng(43.91892, -78.89231);
  createMarker(point, 'This is point 2');

  point = new google.maps.LatLng(43.82589, -79.10040);
  createMarker(point, 'This is point 3');
}

function createMarker(latlng, html) {

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(html);
    infowindow.open(map, marker);
  });
}

initialize();

#map_canvas {
  height: 200px;
}

<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>