StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>What you need to do is extend your <code>bounds</code> object as you add each marker. Then after adding them all, call <code>fitBounds</code> to redraw the map to the appropriate zoom level for that bounds object.</p> <p>Add an InfoWindow within the loop as you create your markers, bound to each marker. This worked for me:</p> <pre><code>var geocoder; var map; var markersArray = []; var bounds; var infowindow = new google.maps.InfoWindow({ content: '' }); //plot initial point using geocode instead of coordinates (works just fine) function initialize() { geocoder = new google.maps.Geocoder(); bounds = new google.maps.LatLngBounds (); var myOptions = { zoom: 2, mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); geocoder.geocode( { 'address': '5th Avenus New Yort'}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); bounds.extend(results[0].geometry.location); markersArray.push(marker); } else{ alert("Geocode was not successful for the following reason: " + status); } }); plotMarkers(); } var locationsArray = [ ['Google Official','1600 Amphitheatre Parkway, Mountain View, USA'], ['Google 1','112 S. Main St., Ann Arbor, USA'], ['Google 2','10 10th Street NE, Suite 600 USA'] ]; function plotMarkers(){ var i; for(i = 0; i < locationsArray.length; i++){ codeAddresses(locationsArray[i]); } } function codeAddresses(address){ geocoder.geocode( { 'address': address[1]}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(address[0]); infowindow.open(map, this); }); bounds.extend(results[0].geometry.location); markersArray.push(marker); } else{ alert("Geocode was not successful for the following reason: " + status); } map.fitBounds(bounds); }); } google.maps.event.addDomListener(window, 'load', initialize); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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