Google Maps Auto Zoom and Auto Center - google-maps

Question

Originally we entered the zoom and coordinates. Now we would like it to auto zoom and auto center. Tried bounds.extend() with map.fitBounds(); map.panToBounds(); and can't seem to get it to zoom and center properly. Original code below. Any help greatly appreciated.
<script>
var mapfunction = function() {
$this = $("#map_canvas");
$zoom_level = ($this.data("gmap-zoom") || 5);
$data_lat = ($this.data("gmap-lat") || 29.895883);
$data_lng = ($this.data("gmap-lng") || -80.650635);
$xml_src = ($this.data("gmap-src") || "xml/gmap/pins.xml");
nvisionhstyleMap = new google.maps.StyledMapType(nightvision_highlight_style, {
name: "Nightvision"
});
function xmlLoadMap() {
var centerLatLng = new google.maps.LatLng($data_lat, $data_lng),
mapOptions = {
zoom: $zoom_level,
center: centerLatLng,
//disableDefaultUI: true,
//mapTypeId : google.maps.MapTypeId.ROADMAP
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'nightvision_highlight_style'
]
}
},
bounds = new google.maps.LatLngBounds(),
infowindow = new google.maps.InfoWindow(),
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('nightvision_highlight_style', nvisionhstyleMap);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
// map.setMapTypeId('metro_style');
$.get($xml_src, function(data) {
// create the Bounds object
var bounds = new google.maps.LatLngBounds();
$(data).find("marker").each(function(){
var eachMarker = jQuery(this),
// grab the address from XML
theAddress = eachMarker.find("address").text(),
mygc = new google.maps.Geocoder(theAddress);
mygc.geocode({'address' : theAddress}, function(results, status) {
var mLat = results[0].geometry.location.lat(),
Long = results[0].geometry.location.lng(),
marker = new google.maps.Marker({
position : new google.maps.LatLng(mLat, Long),
map : map,
icon : ('img/' + eachMarker.find("icons").text() + '.png'),
scrollwheel : false,
streetViewControl : true,
title : eachMarker.find("name").text()
}),
link = "link";
google.maps.event.addListener(marker, 'click', function() {// click
// Setting the content of the InfoWindow
var contentString = '<div id="info-map" style="width:300px; height:85px; padding:0px;"><div>' + '<div style="display:inline-block; width:86px; verticle-align:top; float:left;"><img src=' + eachMarker.find("image").text() + ' class="thumbnail" style="width:80%; verticle-align:top;" /></div>' + '<div style="display:inline-block; width:200px; float:left;"><h4>' + eachMarker.find("name").text() + '</h4><b>' + eachMarker.find("address").text() + '</b><br/>' + '<p><i class="fa fa-fw fa-map-marker"></i>More Info</p>' + '</div></div></div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
google.maps.event.addListener(map, 'click', function() {
infowindow.close()
})
});
});// end geocode
});// end find marker loop
}); // end get data
} // end xmlLoadMap
// grey
xmlLoadMap();
};
// end pagefunction
// run pagefunction on load
$(window).unbind('gMapsLoaded');
$(window).bind('gMapsLoaded', mapfunction);
window.loadGoogleMaps();
Here is what we tried with `bound.extend'. It changes from the default value but centers it 0,0 instead of to the markers.
<script>
var mapfunction = function() {
$this = $("#map_canvas");
$zoom_level = ($this.data("gmap-zoom") || 5);
$data_lat = ($this.data("gmap-lat") || 29.895883);
$data_lng = ($this.data("gmap-lng") || -80.650635);
$xml_src = ($this.data("gmap-src") || "xml/gmap/pins.xml");
nvisionhstyleMap = new google.maps.StyledMapType(nightvision_highlight_style, {
name: "Nightvision"
});
function xmlLoadMap() {
var centerLatLng = new google.maps.LatLng($data_lat, $data_lng),
mapOptions = {
zoom: $zoom_level,
center: centerLatLng,
//disableDefaultUI: true,
//mapTypeId : google.maps.MapTypeId.ROADMAP
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'nightvision_highlight_style'
]
}
},
bounds = new google.maps.LatLngBounds(),
infowindow = new google.maps.InfoWindow(),
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('nightvision_highlight_style', nvisionhstyleMap);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
// map.setMapTypeId('metro_style');
$.get($xml_src, function(data) {
// create the Bounds object
var bounds = new google.maps.LatLngBounds();
$(data).find("marker").each(function(){
var eachMarker = jQuery(this),
// grab the address from XML
theAddress = eachMarker.find("address").text(),
mygc = new google.maps.Geocoder(theAddress);
mygc.geocode({'address' : theAddress}, function(results, status) {
var mLat = results[0].geometry.location.lat(),
Long = results[0].geometry.location.lng(),
marker = new google.maps.Marker({
position : new google.maps.LatLng(mLat, Long),
map : map,
icon : ('img/' + eachMarker.find("icons").text() + '.png'),
scrollwheel : false,
streetViewControl : true,
title : eachMarker.find("name").text()
}),
link = "link";
bounds.extend(new google.maps.LatLng(mLat, Long));
google.maps.event.addListener(marker, 'click', function() {// click
// Setting the content of the InfoWindow
var contentString = '<div id="info-map" style="width:300px; height:85px; padding:0px;"><div>' + '<div style="display:inline-block; width:86px; verticle-align:top; float:left;"><img src=' + eachMarker.find("image").text() + ' class="thumbnail" style="width:80%; verticle-align:top;" /></div>' + '<div style="display:inline-block; width:200px; float:left;"><h4>' + eachMarker.find("name").text() + '</h4><b>' + eachMarker.find("address").text() + '</b><br/>' + '<p><i class="fa fa-fw fa-map-marker"></i>More Info</p>' + '</div></div></div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
google.maps.event.addListener(map, 'click', function() {
infowindow.close()
})
});
});// end geocode
});// end find marker loop
}); // end get data
map.fitBounds(bounds);
map.panToBounds(bounds);
} // end xmlLoadMap
// grey
xmlLoadMap();
};
// end pagefunction
// run pagefunction on load
$(window).unbind('gMapsLoaded');
$(window).bind('gMapsLoaded', mapfunction);
window.loadGoogleMaps();

Answer 1

Got it! map.fitBounds() needs to be called before Geocode end. Added address_count++ to geocode and called map.fitBounds() on last marker.
if(address_count == $(data).find("marker").length) {
map.fitBounds(bounds);
map.panToBounds(bounds);
}
});// end geocode
});// end find marker loop
}); // end get data
} // end xmlLoadMap
xmlLoadMap();
};