CODEWITHSUNDEEP
jquerygoogle-maps-api-3infowindow
Kevin Whitaker
Kevin Whitaker

Reputation: 13415

Google Maps API - opening a single infoWindow

I'm following a SitePoint tutorial for integrating the Google Maps API into our site with jQuery, and I've got everything working really well, with one exception: each new marker opens a separate info window, without closing the previous one. I'm trying to figure out how to have only one window open at a time.

Here's the tutorial in question: http://www.sitepoint.com/google-maps-api-jquery/

I've checked this question here: Have just one InfoWindow open in Google Maps API v3 but I wasn't able to solve my problem by following the answer there (I could have easily misinterpreted).

My code looks like this:

$(document).ready(function(){  
  var MYMAP = {
  map: null,
  bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();       
}

MYMAP.placeMarkers = function(filename) {
  $.get(filename, function(json){
    $.each(json, function(i,loc){
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude),
        map: MYMAP.map,
        title: loc.deal.subject
      });

      var arrMarkers = [];
      arrMarkers[i] = marker;
      var infoWindow = new google.maps.InfoWindow({
        content: "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>"
      });

      var arrInfoWindows = [];
      arrInfoWindows[i] = infoWindow;
      google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(MYMAP.map,marker);
      });
    });         
  }, "json");
}

$("#map").css({
  height: 500,
  width: 600
});

var myLatLng = new google.maps.LatLng(#{@deals.first.merchant_locations.first.latitude},#{@deals.first.merchant_locations.first.longitude});
MYMAP.init('#map', myLatLng, 11);
MYMAP.placeMarkers('/more_deals/get_locations/#{@market.id}');

});

Any help is appreciated. Thanks

Upvotes: 0

Views: 1829

Answers (2)

duncan
duncan

Reputation: 31912

You're creating the infowindow within your .each() loop. Instead, create one infowindow outwith that loop. Then in your event listener, just update the content of that global infowindow each time.

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();      
}

MYMAP.placeMarkers = function(filename) {
  $.get(filename, function(json){
    var infoWindow = new google.maps.InfoWindow({
            content: ""
      }); 

    $.each(json, function(i,loc){
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude),
        map: MYMAP.map,
        title: loc.deal.subject
      });

      bindInfoWindow(marker, MYMAP.map, infoWindow, "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>");
    });         
  }, "json");
}

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

$("#map").css({
  height: 500,
  width: 600
});

var myLatLng = new google.maps.LatLng(#{@deals.first.merchant_locations.first.latitude},#{@deals.first.merchant_locations.first.longitude});
MYMAP.init('#map', myLatLng, 11);
MYMAP.placeMarkers('/more_deals/get_locations/#{@market.id}');

Upvotes: 3

Anoop
Anoop

Reputation: 23208

Create only one InfoWindow object. Your modified code.

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();       
}

MYMAP.placeMarkers = function(filename) {

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

  $.get(filename, function(json){
    $.each(json, function(i,loc){
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude),
        map: MYMAP.map,
        title: loc.deal.subject
      });

      var arrMarkers = [];
      arrMarkers[i] = marker;


      google.maps.event.addListener(marker, 'click', function(){
        infoWindow.setContent (
        "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>"
      );
        infoWindow.open(MYMAP.map,marker);
      });
    });         
  }, "json");
}

$("#map").css({
  height: 500,
  width: 600
});

Upvotes: 0

Related Questions