Auto switch to other mapType on max zoom level in google maps

问题

By default my map has TERRAIN mapType with maxZoom=15. I want map to change it's mapType to HYBRID (that has maxZoom=22) automatically when user tries to zoom map above the 15 level.

Currently I do the following:

google.maps.event.addListener(map,"zoom_changed",function() {
  if (map.getZoom() == 15)
    map.setMapTypeId("hybrid");
});

This solution does not suit me because here we loose terrain map zoom=15, and I want to change mapType only if there's no data for this mapType on the current level. But further zooming in to 16 level is disabled on terrain map.

Is there any way to do that (rewrite maxZoom setting to 16 for terrain mapType or use custom mapType)?

回答1:

Rather simple solution is to create Your own mapTypes based on the terrain and hybrid built-in types. We just take an existent map.mapTypes.get("terrain") mapType object and increase it's maxZoom setting, after that we replace terrain mapType with our edited object.

This is the basic example that shows how to create and append custom mapType to google maps: https://developers.google.com/maps/documentation/javascript/examples/maptype-base.

Let's consider two basic mapTypes: hybrid and terrain and build our own mapTypes on them:

var terrainMapType = map.mapTypes.get("terrain");
var hybridMapType = map.mapTypes.get("hybrid");
var terrainZoomAdd = terrainMapType.maxZoom<hybridMapType.maxZoom?1:0;
var hybridZoomAdd = terrainMapType.maxZoom<hybridMapType.maxZoom?0:1;

map.mapTypes.set("terrain+",$.extend({},terrainMapType,{
  maxZoom: terrainMapType.maxZoom + terrainZoomAdd,
  maxZoomIncreased: terrainZoomAdd>0
}));

map.mapTypes.set("hybrid+",$.extend({},hybridMapType,{
  maxZoom: hybridMapType.maxZoom + hybridZoomAdd,
  maxZoomIncreased: hybridZoomAdd>0
}));

Now we have custom map types, one of them might have increased maxZoom value, and the map on this maxZoom level is black, because there's no actual data for it.

Let's subscribe for zoom_change event and switch from one MapType to another when map is black:

var onZoomChange = function() {
  var mapTypeTerrain = map.mapTypes.get("terrain+");
  var mapTypeHybrid = map.mapTypes.get("hybrid+");
  var maxZoomTerrain = mapTypeTerrain ? mapTypeTerrain.maxZoom : 0;
  var maxZoomHybrid = mapTypeHybrid ? mapTypeHybrid.maxZoom : 0;
  if (map.getMapTypeId() == "terrain+" && map.getZoom() == maxZoomTerrain && maxZoomTerrain<maxZoomHybrid)
    map.setMapTypeId("hybrid+");
  if (map.getMapTypeId() == "hybrid+" && map.getZoom() == maxZoomHybrid && maxZoomHybrid<maxZoomTerrain)
    map.setMapTypeId("terrain+");
}

The last thing is to change built-in maptypeid_change method a little bit. Currently when user switches mapType manually and the current zoom level is greater than maxZoom of the mapType that is set, google maps sets zoom to the maxZoom and the map becomes black because there's no actual data.

var onMapTypeIdChange = function() {
  var mapType = map.mapTypes.get(map.getMapTypeId());
  if (!mapType) return;
  if (mapType.maxZoomIncreased && map.getZoom() >= mapType.maxZoom)
    map.setZoom(mapType.maxZoom-1);
}

Here's the full code: http://jsfiddle.net/kasheftin/xJ2kQ/.

回答2:

capture the click event on the zoomControl (you may need to make a custom zoomControl as Dr.Molle says), if the event happens at zoom=15 change the mapType and zoom.
capture the double click event on the map, if the event happens at zoom=15 change the mapType and zoom.
capture the keyboard events to zoom the map, if that happens at zoom=15 change the mapType and zoom.

update per Andre Dion:
You would also need to listen for scrollwheel events and if supporting mobile, pinch/zoom gestures.

(also any other action that would zoom the map would need to be handled the same way)

来源：https://stackoverflow.com/questions/18123385/auto-switch-to-other-maptype-on-max-zoom-level-in-google-maps

标签

google-maps

google-maps-api-3

zooming