google maps api zoom don't work

296 views Asked by At

I have a problem with zoom. I try to google it but it seems I'm stuck on this.

If I adjust the settings in my zoom parameter, this has no effect! is it a bug in my code, or am I missing something her ?

Any help / tips would be appreciated!

var markers = [
    <?php include("gmaps/hyttetomter.php"); ?>
    <?php include("gmaps/boligtomter.php"); ?>
 ,    ];
window.onload = function () {

    var mapOptions = {
        panControl: true,
        streetViewControl: false,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        },
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();

    var imageBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(58.608394, 7.940108),
        new google.maps.LatLng(58.996358, 8.781880)
    );

    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    var i = 0;

    var interval = setInterval(function () {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var icon = "";
        switch (data.type) {
            case "Hyttefelt":
                icon = "red";
                break;
            case "Boligfelt":
                icon = "yellow";
                break;
            case "Hyttetomt":
                icon = "blue";
                break;
            case "Boligtomt":
                icon = "green";
                break;
        }
        icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
            animation: google.maps.Animation.DROP,
            icon: new google.maps.MarkerImage(icon)
        });

        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                window.location.href = data.description;
            });
        })(marker, data); 

        latlngbounds.extend(marker.position);
        i++;

        if (i == markers.length) {
            clearInterval(interval);
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }   
        historicalOverlay = new google.maps.GroundOverlay(
            'images/map/kart-amli.png',
            imageBounds
        );
        historicalOverlay.setMap(map);
    }, 80); 
}
2

There are 2 answers

0
John van der linden On

I found it! The map.fitBounds(bounds); overrites the zoom function.

thanks!

2
Quantum On

This might not help but this is the code and it works for me, Maybe you have to put it all into a variable like i have

var mapOptions = {
        zoom: 2,
        center: myLatlng
    }