javascript - google maps api animation and multiple infowindows -
i'm trying map dropdown markers (every infowindow). multiple markers must start html/css button. infowindows should have different text. can't build same text in every infowindows. in console browser see message: "script445: object doesn't support action". can't trigger infowidow @ all. code /used google examples/ below:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>marker animations <code>settimeout()</code></title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #floating-panel { margin-left: -52px; } </style> </head> <body> <div id="floating-panel"> <button id="drop" onclick="drop()">drop markers</button> </div> <div id="map"></div> <script async defer src= "https://maps.googleapis.com/maps/api/jssigned_in=true&libraries=places&callback=initmap"> </script> <script> var neighborhoods = [ {lat: 52.511, lng: 13.447, name: "2007"}, {lat: 52.549, lng: 13.422, name: "2008"}, {lat: 52.497, lng: 13.396, name: "2009"}, {lat: 52.517, lng: 13.394, name: "2010"} ]; var markers = []; var map; function initmap() { map = new google.maps.map(document.getelementbyid('map'), { zoom: 12, center: {lat: 52.520, lng: 13.410} }); } function drop() { clearmarkers(); (var = 0; < neighborhoods.length; i++) { addmarkerwithtimeout(neighborhoods[i], * 200); } } var contentstring = '<div id="content">'+ '<div id="sitenotice">'+ '</div>'+ '<h1 id="firstheading" class="firstheading">uluru</h1>'+ '<div id="bodycontent">'+ '<p><b>uluru</b>, referred <b>ayers rock</b>, large ' + 'sandstone rock formation in southern part of '+ 'northern territory, central australia. lies 335 km (208 mi) '+ 'south west of nearest large town, alice springs; 450 km '+ '(280 mi) road. kata tjuta , uluru 2 major '+ 'features of uluru - kata tjuta national park. uluru '+ 'sacred pitjantjatjara , yankunytjatjara, '+ 'aboriginal people of area. has many springs, waterholes, '+ 'rock caves , ancient paintings. uluru listed world '+ 'heritage site.</p>'+ '<p>attribution: uluru, <a href="https://en.wikipedia.org/w/index.php?title=uluru&oldid=297882194">'+ 'https://en.wikipedia.org/w/index.php?title=uluru</a> '+ '(last visited june 22, 2009).</p>'+ '</div>'+ '</div>'; function addmarkerwithtimeout(position, timeout) { window.settimeout(function() { var data = position; var marker = new google.maps.marker({ position: position, map: map, title: data.name, animation: google.maps.animation.drop }); markers.push(marker); var infowindow = new google.maps.infowindowinfo({ content: contentstring, }); google.maps.event.addlistener(marker, function() { if (this.getmap()) { infowindow.open(this.getmap(), this); } else { infowindow.close() } }); }, timeout); } function clearmarkers() { (var = 0; < markers.length; i++) { markers[i].setmap(null); } markers = []; } google.maps.event.adddomlistener(window, 'load', initmap); </script> </body> </html
simplest solution, pass desired html in addmarkerswithtimeout function , use function closure (like done in answer google maps js api v3 - simple multiple marker example) associate marker's content click event listener marker:
function addmarkerwithtimeout(position, html, timeout) { window.settimeout(function() { var data = position; var marker = new google.maps.marker({ position: position, map: map, title: data.name, animation: google.maps.animation.drop }); markers.push(marker); var infowindow = new google.maps.infowindow({ content: html, }); google.maps.event.addlistener(marker, 'click', (function(marker, html) { return function() { if (this.getmap()) { infowindow.open(this.getmap(), this); } else { infowindow.close() } } })(marker, html)); }, timeout); } code snippet:
function addmarkerwithtimeout(position, html, timeout) { window.settimeout(function() { var data = position; var marker = new google.maps.marker({ position: position, map: map, title: data.name, animation: google.maps.animation.drop }); markers.push(marker); var infowindow = new google.maps.infowindow({ content: html, }); google.maps.event.addlistener(marker, 'click', (function(marker, html) { return function() { if (this.getmap()) { infowindow.open(this.getmap(), this); } else { infowindow.close() } } })(marker, html)); }, timeout); } function initmap() { map = new google.maps.map(document.getelementbyid('map'), { zoom: 12, center: { lat: 52.520, lng: 13.410 } }); } function drop() { clearmarkers(); (var = 0; < neighborhoods.length; i++) { if (i == 0) { html = contentstring } else { html = "html " + } addmarkerwithtimeout(neighborhoods[i], html, * 200); } } var contentstring = '<div id="content">' + '<div id="sitenotice">' + '</div>' + '<h1 id="firstheading" class="firstheading">uluru</h1>' + '<div id="bodycontent">' + '<p><b>uluru</b>, referred <b>ayers rock</b>, large ' + 'sandstone rock formation in southern part of ' + 'northern territory, central australia. lies 335 km (208 mi) ' + 'south west of nearest large town, alice springs; 450 km ' + '(280 mi) road. kata tjuta , uluru 2 major ' + 'features of uluru - kata tjuta national park. uluru ' + 'sacred pitjantjatjara , yankunytjatjara, ' + 'aboriginal people of area. has many springs, waterholes, ' + 'rock caves , ancient paintings. uluru listed world ' + 'heritage site.</p>' + '<p>attribution: uluru, <a href="https://en.wikipedia.org/w/index.php?title=uluru&oldid=297882194">' + 'https://en.wikipedia.org/w/index.php?title=uluru</a> ' + '(last visited june 22, 2009).</p>' + '</div>' + '</div>'; function clearmarkers() { (var = 0; < markers.length; i++) { markers[i].setmap(null); } markers = []; } var neighborhoods = [{ lat: 52.511, lng: 13.447, name: "2007" }, { lat: 52.549, lng: 13.422, name: "2008" }, { lat: 52.497, lng: 13.396, name: "2009" }, { lat: 52.517, lng: 13.394, name: "2010" }]; var markers = []; var map; google.maps.event.adddomlistener(window, 'load', initmap);html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'roboto', 'sans-serif'; line-height: 30px; padding-left: 10px; } #floating-panel { margin-left: -52px; }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="floating-panel"> <button id="drop" onclick="drop()">drop markers</button> </div> <div id="map"></div>
Comments
Post a Comment