javascript - Google Maps Zoom in on Marker with One Click Multiple Markers -
i have read lot of other posts here on stackoverflow , in google search, , still cannot work correctly. think has loop. set mouseover event info windows, want map zoom in on marker when click , center in map. have tried:
google.maps.event.addlistener(marker,'click',function(e) { map.setzoom(9); map.setcenter(e.latlng); }); which has worked best still doesn't center on marker, after multiple clicks. marker not in view.
the code snippet wanted use this:
// add double-click event listener google.maps.event.addlistener(marker, 'dblclick', function(event){ map = marker.getmap(); map.setcenter(overlay.getposition()); // set map center marker position smoothzoom(map, 12, map.getzoom()); // call smoothzoom, parameters map, final zoomlevel, , starting zoom level }) // smooth zoom function function smoothzoom (map, max, cnt) { if (cnt >= max) { return; } else { y = google.maps.event.addlistener(map, 'zoom_changed', function(event){ google.maps.event.removelistener(y); self.smoothzoom(map, max, cnt + 1); }); settimeout(function(){map.setzoom(cnt)}, 80); } } because suppose have smooth zoom. can't 1 work hardly @ all. clicks on markers go long island ny or nowhere.
my code follow:
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(api)&sensor=false"> </script> <script type="text/javascript"> google.maps.visualrefresh = true; function initialize() { var mapoptions = { center: new google.maps.latlng(42, -97), zoom: 4, maptypeid: google.maps.maptypeid.roadmap }; var jobs = [ ['taylor', 'texas', 30.570155, -97.409649, 'machine install , training'], ['fort riley', 'kansas', 39.104172, -96.735558, 'machine install , training'], ['toronto', 'ontario, canada', 43.653226, -79.383184, 'machine install , training'], ['spokane', 'washington', 47.658780, -117.426047, 'machine install , training'], ['new paris', 'indiana', 41.504848, -85.826487, 'machine install'], ['charleston', 'mississippi', 34.00711, -90.055194, 'machine install , training'], ['tinley park', 'illinois', 41.596405, -87.785119, 'training.'], ['savannah', 'georgia', 32.08078, -81.090719, 'machine install , training'], ['long island', 'new york', 40.852505, -73.135849, 'machine install , training'] ]; var map = new google.maps.map(document.getelementbyid("map-canvas"), mapoptions); var infowindow = new google.maps.infowindow; (var = 0; < jobs.length; i++) { var city = jobs[i][0]; var state = jobs[i][1]; var lat = jobs[i][2]; var lng = jobs[i][3]; var desc = jobs[i][4]; var z = i; var mylatlng = new google.maps.latlng(lat, lng); var content = '<div class="map-content"><h3>' + city + ', ' + state + '</h3>' + desc + '</div>'; var marker = new google.maps.marker({ map: map, title: city + state, position: mylatlng, zindex: z }); google.maps.event.addlistener(marker, 'mouseover', (function(marker, content) { return function() { infowindow.setcontent(content); infowindow.open(map, marker); } })(marker, content)); // add double-click event listener google.maps.event.addlistener(marker, 'dblclick', function(event){ map = marker.getmap(); map.setcenter(overlay.getposition()); // set map center marker position smoothzoom(map, 12, map.getzoom()); // call smoothzoom, parameters map, final zoomlevel, , starting zoom level }) // smooth zoom function function smoothzoom (map, max, cnt) { if (cnt >= max) { return; } else { y = google.maps.event.addlistener(map, 'zoom_changed', function(event){ google.maps.event.removelistener(y); self.smoothzoom(map, max, cnt + 1); }); settimeout(function(){map.setzoom(cnt)}, 80); } } } } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body onload="initialize()"> <div id="map-canvas"/> </body> </html> if remove code attempting zoom click event , take out of loop, works long island marker (since last information in array processed). on how center on markers on click great. can't find searching has been implemented on arrays , loops. new google api, , have done basic javascript on top of that.
edit: an example of here.
looks have scope problem.
try eventlistener:
google.maps.event.addlistener(marker, 'click', function() { map.panto(this.getposition()); }); this works here:
Comments
Post a Comment