Google map limits the map zoom level and display range

When using Google Maps, we often want to display only a part of the map and limit the zoom level of the map. In this case, you need to customize the map zoom level and display range of Google map.

Custom map scaling range

To control the zoom level range of a map, you must reload the getminimumresolution () and getmaximumresolution () Methods of gmaptype. The following code sets the zoom level of the map to 12-16.

1 function setmapresolution ()
2 {
3 // obtain all map types
4 var maptypes = map. getmaptypes ();
5 // limit the zoom level for all map types
6 For (VAR I = 0; I <maptypes. length; I ++)
7 {
8 maptypes [I]. getminimumresolution = function () {return 12 ;};
9 maptypes [I]. getmaximumresulution = function () {return 16 ;};
10}
11}

 

Then, after loading the map, you can call this function to limit the zoom level of the map to 12-16.

Display range of custom Map

The display range of restricted maps is slightly more complex. First, use glatlngbounds to define the range of a map. After dragging or moving a map, determine whether the center of the map is out of the restricted range. If the range is exceeded, move the map to the restricted range.

1 // restrict the display range of the map
2 function checkmapbounds (MAP, maprange)
3 {
4 If (MAP)
5 {
6 if (maprange. Contains (Map. getcenter ()))
7 {
8 return;
9}
10
11 var center = map. getcenter ();
12 var centerx = center. LNG ();
13 var centery = center. LAT ();
14
15 var Maxx = maprange. getnortheast (). LNG ();
16 var Maxy = maprange. getnortheast (). LAT ();
17 var Minx = maprange. getsouthwest (). LNG ();
18 var miny = maprange. getsouthwest (). LAT ();
19
20 if (centerx <Minx) {centerx = Minx ;}
21 if (centerx> Maxx) {centerx = Maxx ;}
22 if (centery <miny) {centery = miny ;}
23 if (centery> Maxy) {centery = Maxy ;}
24
25 map. Panto (new Google. Maps. latlng (centery, centerx ));
26}
27}

 

Then bind this method to the dragend event. Determine whether the current position is within the limit at the end of each map drag.

1 // set the map display range
2 Google. Maps. event. addlistener (MAP, 'dragend', function (){
3 checkmapbounds (MAP, maprangebound );
4 });