开发者

Google maps, setting minimum and maximum slider controls

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开发者_如何学Python() {   
   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


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!


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);


As mentioned above, the only way I have so far found in V3 to do this is with an event listener. Here is the code (for maximum zoom level 12 as an example):

google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() > 12) map.setZoom(12);
});

Yes, ugly and dirty and wrong, I know.


getMinimumResolution is a GMapType Method, not a GMap2 Method. so instead of this:

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

You could do this:

var mt = map.getMapTypes();

for (var i=0; i<mt.length; i++) {
  mt[i].getMinimumResolution = function() {return 6;}
}


It looks like you're using the Maps API Version 3, which doesn't have a way to set the min and max resolutions. Not yet at least.

You could always listen for zoom changes and reset the zoom if it's not where you want it to be - but that would be pretty ugly. :)


Try this. Works fine for me

// force normal maps type
map.setMapType(G_NORMAL_MAP);

// define minimum and maximum zoom levels
G_NORMAL_MAP.getMinimumResolution = function() { return 0; }
G_NORMAL_MAP.getMaximumResolution = function() { return 19; }


I ran into the same problem

n_customMap.getMinimumResolution = function() { return 5 }; 
n_customMap.getMaximumResolution = function() { return 10 }; 

that worked for me

you should also set the options to

minZoom: 5,
maxZoom: 10
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜