Menu
is it possible to limit Google map v3 to a certain area? I want to allow displaying only some area (e.g. a country) and disallow the user to slide elsewhere. Also I want to restrict the zoom level - e.g. only between levels 6 and 9. And I want to use all the base map types.
Is there any way to achieve this?
I had a partial success with limiting zoom level by using StyledMap, but I succeeded only with restricting ROADMAP, I wasn't able to limit zoom on other basic types this way.
Thanks for any help
850
Setting up the minimum or maximum Zoom value for Google Maps can be done by adding the shortcode attribute with Store Locator Shortcode. Furthermore, the maximum value of Google Maps Zoom level is 22. Therefore, the defined maximum value must be below or equal to 22, which is the default.
Step 1 Go to Add or Edit Map and scroll down to 'Limit Panning Settings' section. Step 2 Enable 'Limit Panning' tab. Step 3 Enter latitude and longtitude of south and north west and select any zoom level. Step 4 At the end, click on the Save Map.
Overview. The Google Maps API provides map tiles at various zoom levels for map type imagery. Most roadmap imagery is available from zoom levels 0 to 18, for example. Satellite imagery varies more widely as this imagery is not generated, but directly photographed.
When showing a standard Google map, it comes with the default control set: Zoom - displays a slider or "+/-" buttons to control the zoom level of the map.
Better way to restrict zoom level might be to use the minZoom/maxZoom options rather than reacting to events?
var opt = { minZoom: 6, maxZoom: 9 }; map.setOptions(opt); Or the options can be specified during map initialization, e.g.:
var map = new google.maps.Map(document.getElementById('map-canvas'), opt); See: Google Maps JavaScript API V3 Reference
187
You can listen to the dragend event, and if the map is dragged outside the allowed bounds, move it back inside. You can define your allowed bounds in a LatLngBounds object and then use the contains() method to check if the new lat/lng center is within the bounds.
You can also limit the zoom level very easily.
Consider the following example: Fiddle Demo
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div id="map" style="width: 400px; height: 300px;"></div> <script type="text/javascript"> // This is the minimum zoom level that we'll allow var minZoomLevel = 5; var map = new google.maps.Map(document.getElementById('map'), { zoom: minZoomLevel, center: new google.maps.LatLng(38.50, -90.50), mapTypeId: google.maps.MapTypeId.ROADMAP }); // Bounds for North America var strictBounds = new google.maps.LatLngBounds( new google.maps.LatLng(28.70, -127.50), new google.maps.LatLng(48.85, -55.90) ); // Listen for the dragend event google.maps.event.addListener(map, 'dragend', function() { if (strictBounds.contains(map.getCenter())) return; // We're out of bounds - Move the map back within the bounds var c = map.getCenter(), x = c.lng(), y = c.lat(), maxX = strictBounds.getNorthEast().lng(), maxY = strictBounds.getNorthEast().lat(), minX = strictBounds.getSouthWest().lng(), minY = strictBounds.getSouthWest().lat(); if (x < minX) x = minX; if (x > maxX) x = maxX; if (y < minY) y = minY; if (y > maxY) y = maxY; map.setCenter(new google.maps.LatLng(y, x)); }); // Limit the zoom level google.maps.event.addListener(map, 'zoom_changed', function() { if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); }); </script> </body> </html> Screenshot from the above example. The user will not be able to drag further south or far east in this case:
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
