i'm having hard time getting information in infowindow on google map marker correct. markers in correct place but, passing name of second place both first , second infowindows.
<script> function initmap() { var mapoptions = { zoom: 14, scrollwheel: false, center: new google.maps.latlng(31.44, -100.47) } var map = new google.maps.map(document.getelementbyid('super_map'), mapoptions); var geocoder = new google.maps.geocoder(); var addresses = ["3000 main st san angelo tx", "4001 sunset dr san angelo tx"]; var names = ['first place', 'second place']; for(var x = 0; x < addresses.length; x++){ var name = names[x]; geocoder.geocode( { 'address': addresses[x]}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { var marker = new google.maps.marker({ map: map, position: results[0].geometry.location, animation: google.maps.animation.drop, }); var contentstring = name; var infowindow = new google.maps.infowindow({ content: contentstring }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); }); } }); } } google.maps.event.adddomlistener(window, 'load', initmap); google.maps.event.adddomlistener(window, 'resize', initmap); </script> i've tried set setcontent same results...
google.maps.event.addlistener(marker, 'click', function() { infowindow.setcontent(names[0]); infowindow.open(map,marker); });
one option solve issue function closure on "name". code below creates anonymous function each iteration of loop holds function closure on name variable.
geocoder.geocode({ 'address': addresses[x] // function closure on "name" }, (function(name) { return function(results, status) { if (status == google.maps.geocoderstatus.ok) { var marker = new google.maps.marker({ map: map, position: results[0].geometry.location, animation: google.maps.animation.drop, }); var contentstring = name; var infowindow = new google.maps.infowindow({ content: contentstring }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map, marker); }); } } })(name)); code snippet:
function initmap() { var mapoptions = { zoom: 14, scrollwheel: false, center: new google.maps.latlng(31.44, -100.47) } var map = new google.maps.map(document.getelementbyid('super_map'), mapoptions); var bounds = new google.maps.latlngbounds(); var geocoder = new google.maps.geocoder(); (var x = 0; x < addresses.length; x++) { var name = names[x]; geocoder.geocode({ 'address': addresses[x] }, (function(name) { // function closure on "name" return function(results, status) { if (status == google.maps.geocoderstatus.ok) { bounds.extend(results[0].geometry.location); map.fitbounds(bounds); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location, animation: google.maps.animation.drop, }); var contentstring = name; var infowindow = new google.maps.infowindow({ content: contentstring }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map, marker); }); } } })(name)); } } google.maps.event.adddomlistener(window, 'load', initmap); google.maps.event.adddomlistener(window, 'resize', initmap); var addresses = ["3000 main st san angelo tx", "4001 sunset dr san angelo tx"]; var names = ['first place', 'second place'];html, body, #super_map { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="super_map"></div>
Comments
Post a Comment