I'm using Google Maps V3 API and after creating several markers on the map, I am having difficulty getting the map to zoom out such that it shows all markers. Right now the code below just shows the markers without adjusting the zoom. Can you find the mistake in there? Thanks!
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(1.289566,103.847267);
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(1.289566,103.847267),
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ff776b"
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(1.301224,103.912949),
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ff776b"
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(1.293150,103.827164),
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=3|ff776b"
});
var LatLngList = array (
new google.maps.LatLng(1.289566,103.847267),
new google.maps.LatLng(1.301224,103.912949),
new google.maps.LatLng(1.293150,103.827164)
);
var bounds = new google.maps.LatLngBounds();
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
bounds.extend(LatLngList[i]);
}
map.fitBounds(bounds);
}
</script>
This:
var LatLngList = array (
new google.maps.LatLng(1.289566,103.847267),
new google.maps.LatLng(1.301224,103.912949),
new google.maps.LatLng(1.293150,103.827164)
);
is not how you create an array in JavaScript. Instead, try:
var LatLngList = [
new google.maps.LatLng(1.289566,103.847267),
new google.maps.LatLng(1.301224,103.912949),
new google.maps.LatLng(1.293150,103.827164)
];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With