Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps V3 Zoom to Show all markers not working

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>
like image 830
Nyxynyx Avatar asked Feb 24 '23 05:02

Nyxynyx


1 Answers

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)
    ];
like image 78
John Flatness Avatar answered Feb 26 '23 22:02

John Flatness