Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google maps, setting minimum and maximum slider controls

Tags:

google-maps

I am working on a googlemap, which all works fine, apart from the fact I can't seem to set a max and min zoom (I would like to limit the levels to a couple of levels either way of a default zoom view)

I have tried using the map.getMimimumResolution, but this doesn't seem to work - any ideas ?

function initialize() {   
   var latlng = new google.maps.LatLng("<%=Html.Encode(Model.Field01.Field01) %>", "<%=Html.Encode(Model.Field01.Field03) %>");
    var myOptions = {
    zoom: 13,
        center: latlng,
        disableDefaultUI: false,
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("mapcontainer"), myOptions);

    map.getMinimumResolution = function() { return 6 }; 

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "<%=Model.AccomName %>"
      });
}

Any thoughts appreciated, Thanks

like image 458
ivor Avatar asked Nov 10 '09 10:11

ivor


2 Answers

There's the apposite configuration parameter :)
Simple example:

<script type="text/javascript">
var latlng = new google.maps.LatLng(42.3493337, 13.398172299999942);
var options = {
    zoom: 8,
    minZoom: 6,
    maxZoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};

map = new google.maps.Map(document.getElementById("map_canvas"), options);
</script>

Here you have the documentation:
http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

Happy coding!

like image 198
yodabar Avatar answered Jan 03 '23 14:01

yodabar


Code below works smoothly for me. No flickering, glitches, etc. Maps API v3.

var inProcess = false;

function onZoomChanged() {
    if (inProcess) return;

    if (gmap.getZoom() > 16) {
        inProcess = true;
        gmap.setZoom(16);
        inProcess = false;
        return
    }
    else if (gmap.getZoom() < 10) {
        inProcess = true;
        gmap.setZoom(10);
        inProcess = false;
        return;
    }
}

google.maps.event.addListener(gmap, 'zoom_changed', onZoomChanged);
like image 36
k12th Avatar answered Jan 03 '23 14:01

k12th