Google Maps v3-放大标记时出错

Question

I am trying to load a google maps v3 element into my website, where a user can dynamically select some filters to show certain markers. The result is then serialized into a JSON file for the maps object to use to set the specified markers.

I've tried to make a test page as follows:

@section headerScripts {
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var map;
        var latlng = new google.maps.LatLng(56.29216, 10.34912);
        var markerList = [];

        function initialize() {
            var mapOptions = {
                zoom: 7,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        }

        function addMarkers(stores) {
            for (var i = 0; i < stores.length; i++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(stores[i].Latitude, stores[i].Longitude),
                    map: map,
                    title: stores[i].Name
                });
                markerList.push(marker);
            }
            zoomToMarkers();
        }

        function zoomToMarkers() {
            var latlngbounds = new google.maps.LatLngBounds();
            markerList.forEach(function (n) {
                latlngbounds.extend(n);
            });
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }

        $(document).ready(function () {
            initialize();
            $.getJSON("/Product/GetStore/", addMarkers);
        });

    </script>
}

<div id="map-canvas" style="width: 500px; height: 500px;"></div>

It sets the markers alright, and that works, but I'd like a function to zoom, so that only the markers on the maps is shown in the "zoom". But when I call the zoomToMarkers (based on a function I found online) - I get an error from the google maps js file:

Unhandled exception at line 16, column 353 in https://maps.gstatic.com/intl/da_dk/mapfiles/api-3/12/9/main.js 0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'lat'

I have no idea why this is happening, as it seems that alot of other people have gotten it to work. Can you guys help?

Answer 1

I've found the error myself. Problem was that in this line

latlngbounds.extend(n);

I was added the marker object to the latlngbounds instead of the coordinates. So I corrected it to this:

function addMarkers(stores) {
    for (var i = 0; i < stores.length; i++) {
        var marker_latlng = new google.maps.LatLng(stores[i].Latitude, stores[i].Longitude);
        var marker = new google.maps.Marker({
            position: marker_latlng,
            map: map,
            title: stores[i].Name
        });
        latlngbounds.extend(marker_latlng);
    }
    zoomToMarkers();
}

function zoomToMarkers() {
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);
}

Which works perfectly!