Databases
StackOverflow2013
Postsdbo
POHow do I close all open infowindows when clicking on a marker?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I close all open infowindows when clicking on a marker?
    text
    copied!<blockquote> <p><strong>Possible Duplicate:</strong><br> <a href="https://stackoverflow.com/questions/12953332/google-maps-infowindow-is-not-closing">Google maps: infowindow is not closing</a> </p> </blockquote> <p>I have spent hours trying to get my head around how to do this but don't seem to be getting anywhere closer to a resolution. Please see my code below:</p> <pre><code>function initialize() { var latlng = new google.maps.LatLng(50.71608,-1.993761); var settings = { zoom: 14, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); var contentString = '&lt;div&gt;'+ '&lt;p&gt;&lt;strong&gt;name&lt;/strong&gt;&lt;/p&gt;'+ '&lt;/div&gt;'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var contentString2 = '&lt;div&gt;'+ '&lt;p&gt;&lt;strong&gt;name&lt;/strong&gt;&lt;/p&gt;'+ '&lt;/div&gt;'; var infowindow2 = new google.maps.InfoWindow({ content: contentString2 }); var contentString3 = '&lt;div&gt;'+ '&lt;p&gt;&lt;strong&gt;name&lt;/strong&gt;&lt;/p&gt;'+ '&lt;/div&gt;'; var infowindow3 = new google.maps.InfoWindow({ content: contentString3 }); var oldIcon = new google.maps.MarkerImage('images/maplogo.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var oldShadow = new google.maps.MarkerImage('images/mapshadow.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50, 50) ); var old = new google.maps.LatLng(50.714110196782485,-1.9864332675933838, 3); var oldMarker = new google.maps.Marker({ position: old, map: map, icon: oldIcon, shadow: oldShadow, title:"title", animation: google.maps.Animation.DROP }); var hamIcon = new google.maps.MarkerImage('images/maplogo.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var hamShadow = new google.maps.MarkerImage('images/mapshadow.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var ham = new google.maps.LatLng(50.71584417870842,-2.006630301475525, 1); var hamMarker = new google.maps.Marker({ position: ham, map: map, icon: hamIcon, shadow: hamShadow, title:"title", animation: google.maps.Animation.DROP }); var centreIcon = new google.maps.MarkerImage('images/maplogo.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var centreShadow = new google.maps.MarkerImage('images/mapshadow.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var centre = new google.maps.LatLng(50.71712636698597,-1.9832682609558105, 2); var centreMarker = new google.maps.Marker({ position: centre, map: map, icon: centreIcon, shadow: centreShadow, title:"title", animation: google.maps.Animation.DROP }); google.maps.event.addListener(oldMarker, 'click', function() { infowindow.open(map,oldMarker); }); google.maps.event.addListener(hamMarker, 'click', function() { infowindow2.open(map,hamMarker); }); google.maps.event.addListener(centreMarker, 'click', function() { infowindow3.open(map,centreMarker); }); } </code></pre> <p>Any help with this would be really appreciated as I have a deadline to meet and a very low understanding of javascript.</p> <p>Thanks </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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