javascript - Close all other InfoWindows when one is clicked -
i trying amend below code other infowindows closed when 1 clicked, 1 open @ once. works great, besides fact user can open 20 infowindows. help.
function infowindow(marker, map, title, address, url) { google.maps.event.addlistener(marker, 'click', function () { var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>read more</a></p></div>"; iw = new google.maps.infowindow({ content: html, maxwidth: 350 }); iw.open(map, marker); }); }
if want 1 infowindow, create 1 , move between markers on click event.
updated code:
// global infowindow var iw = new google.maps.infowindow({ maxwidth: 350 }); function infowindow(marker, map, title, address, url) { google.maps.event.addlistener(marker, 'click', function() { var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>read more</a></p></div>"; // set content (saved in html variable using function closure) iw.setcontent(html); // open infowindow on marker. iw.open(map, marker); }); }
code snippet:
var geocoder; var map; function initialize() { var map = new google.maps.map( document.getelementbyid("map_canvas"), { center: new google.maps.latlng(37.4419, -122.1419), zoom: 13, maptypeid: google.maps.maptypeid.roadmap }); var marker1 = new google.maps.marker({ position: new google.maps.latlng(37.4419, -122.1419), map: map }); infowindow(marker1, map, "title1", "address1", "http://www.google.com") var marker2 = new google.maps.marker({ position: new google.maps.latlng(37.44, -122.14), map: map }); infowindow(marker2, map, "title2", "address2", "http://www.yahoo.com") } google.maps.event.adddomlistener(window, "load", initialize); // global infowindow var iw = new google.maps.infowindow({ maxwidth: 350 }); function infowindow(marker, map, title, address, url) { google.maps.event.addlistener(marker, 'click', function() { var html = "<div><h3>" + title + "</h3><p><a href='" + url + "' target='_blank'>read more</a></p></div>"; // set content (saved in html variable using function closure) iw.setcontent(html); // open infowindow on marker. iw.open(map, marker); }); }
html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>
Comments
Post a Comment