Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps API - opening a single infoWindow
    primarykey
    data
    text
    <p>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 <em>one</em> window open at a time.</p> <p>Here's the tutorial in question: <a href="http://www.sitepoint.com/google-maps-api-jquery/" rel="nofollow noreferrer">http://www.sitepoint.com/google-maps-api-jquery/</a></p> <p>I've checked this question here: <a href="https://stackoverflow.com/questions/1875596/have-just-one-infowindow-open-in-google-maps-api-v3">Have just one InfoWindow open in Google Maps API v3</a> but I wasn't able to solve my problem by following the answer there (I could have easily misinterpreted).</p> <p>My code looks like this:</p> <pre><code>$(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: "&lt;h3&gt;" + loc.deal.subject + "&lt;/h3&gt;&lt;p&gt;" + loc.location.merchant_location.address + "&lt;/p&gt;" }); 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}'); </code></pre> <p>});</p> <p>Any help is appreciated. Thanks</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload