Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle API V3 multiple infowindows plus close on click
    primarykey
    data
    text
    <p>I figured out how to have multiple markers with info windows but they do not close when you click another marker, I believe it is because I am creating a new info window for each marker, any help would be appreciated. </p> <pre><code> &lt;script type="text/javascript"&gt; var map ; function initialize() { var latlng = new google.maps.LatLng(53.063165, -3.205390); var myOptions = { zoom: 6, center: latlng, mapTypeId: google.maps.MapTypeId.SATELLITE, zoomControl: false, mapTypeControl: false, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.LEFT_CENTER }, panControl: false, streetViewControl: false, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER } }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = add_marker(56.747923,-3.717155,"Ben Vrackie","&lt;b&gt;Ben Vrackie&lt;/b&gt;&lt;br&gt;&lt;br&gt;Perthshire classic! some sweet hidden gems on this loop.&lt;br&gt; surrounded by amazing countryside, Lochs, hills this&lt;br&gt;has it all... Red Grade."); // pass in as Latitude, then Longitude marker.setMap(map); var marker = add_marker(57.556366,-5.409222,"Torridon Forest","&lt;b&gt;Torridon Forest&lt;/b&gt;&lt;br&gt;&lt;br&gt;Technical and breathtaking.... &lt;br&gt;Black/red grade."); // pass in as Latitude, then Longitude marker.setMap(map) } function add_marker(lat,lng,title,box_html) { var infowindow = new google.maps.InfoWindow({ content: box_html }); var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat,lng), map: map, title: title }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); return marker; } &lt;/script&gt; </code></pre>
    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.
    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