Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modify the max zoom level of a Google Map Type


I need to set the maxZoom level of the google.maps.MapTypeId.HYBRID to 21. Actually, he's set to 14 (inspected with the firebug console).

Set the property of the google.maps object 'maxZoom' doesn't work in this case, and I already try to modify the google.maps.mapTypes object, but without success.

var options = {
    center: new google.maps.LatLng(lat_centre,lng_centre),   
    zoom: 14, 
    maxZoom: 21,
    mapTypeId: google.maps.MapTypeId.TERRAIN,   
    panControl: true,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    disableDoubleClickZoom: true,
    styles: [ 
        {featureType: "poi", stylers: [{visibility: "off"}]} 
        ]                   
    };

    map = new google.maps.Map(document.getElementById("map_container"),options);

AND

google.maps.event.addListener(map, 'tilesloaded', function(event){

    var mapTypeRegistry = map.mapTypes;

    var currentMapTypeId = map.getMapTypeId();

    var mapType = mapTypeRegistry.get(currentMapTypeId);

    mapType.maxZoom = 21;
  });

So, is there a way to increase the zoom level of the mapType HYBRID ?

Thanks.

like image 721
jbrtrnd Avatar asked May 09 '12 14:05

jbrtrnd


1 Answers

If you changed mapType object's property ( maxZoom, minZoom, etc... ), the changed effect will take a place ONLY AFTER the map's type will be changed to that mapType. For example , if current mapType is TERRAIN, and you changed TERRAIN's maxZoom, maxZoom will work only after changing mapType to another type (e.g. ROADMAP,HYBRID,etc..) and back to TERRAIN.

Instead of setting mapType's maxZoom option,use core map's maxZoom option. Add listener for "maptypeid_changed" event, and when event occurs, change maxZoom option of map:

google.maps.event.addListener(map, 'maptypeid_changed', function(event){
    if( map.getMapTypeId() === google.maps.MapTypeId.TERRAIN ){
        map.setOptions({maxZoom:/*For example*/5});
    }else 
    if( map.getMapTypeId() === google.maps.MapTypeId.ROADMAP ){
        map.setOptions({maxZoom:/*For example*/8});
    }//Etc...
    else{
        map.setOptions({maxZoom:/*For example*/21});
    }
});
like image 119
Engineer Avatar answered Sep 28 '22 11:09

Engineer