Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // bounds of the desired area
- var allowedBounds = new google.maps.LatLngBounds(
- new google.maps.LatLng(70.33956792419954, 178.01171875),
- new google.maps.LatLng(83.86483689701898, -88.033203125)
- );
- var lastValidCenter = map.getCenter();
- google.maps.event.addListener(map, 'center_changed', function() {
- if (allowedBounds.contains(map.getCenter())) {
- // still within valid bounds, so save the last valid position
- lastValidCenter = map.getCenter();
- return;
- }
- // not valid anymore => return to last valid position
- map.panTo(lastValidCenter);
- });
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
- <title>Google Maps JavaScript API v3 Example: Limit Panning</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">
- 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 allowedBounds = 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 (allowedBounds.contains(map.getCenter())) return;
- // Out of bounds - Move the map back within the bounds
- var c = map.getCenter(),
- x = c.lng(),
- y = c.lat(),
- maxX = allowedBounds.getNorthEast().lng(),
- maxY = allowedBounds.getNorthEast().lat(),
- minX = allowedBounds.getSouthWest().lng(),
- minY = allowedBounds.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>
- <!DOCTYPE html>
- <html>
- <head>
- <style type="text/css">
- html { height: 100% }
- body { height: 100%; margin: 0; padding: 0 }
- #map-canvas { height: 100% }
- </style>
- <script type="text/javascript"
- src="http://maps.google.com/maps/api/js?sensor=false"></script>
- </script>
- <script type="text/javascript">
- function initialize() {
- var mapOptions = {
- center: new google.maps.LatLng(28.70, -127.50),
- zoom: 4,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("map-canvas"),
- mapOptions);
- // bounds of the desired area
- var allowedBounds = new google.maps.LatLngBounds(
- new google.maps.LatLng(28.70, -127.50),
- new google.maps.LatLng(48.85, -55.90)
- );
- var boundLimits = {
- maxLat : allowedBounds.getNorthEast().lat(),
- maxLng : allowedBounds.getNorthEast().lng(),
- minLat : allowedBounds.getSouthWest().lat(),
- minLng : allowedBounds.getSouthWest().lng()
- };
- var lastValidCenter = map.getCenter();
- var newLat, newLng;
- google.maps.event.addListener(map, 'center_changed', function() {
- center = map.getCenter();
- if (allowedBounds.contains(center)) {
- // still within valid bounds, so save the last valid position
- lastValidCenter = map.getCenter();
- return;
- }
- newLat = lastValidCenter.lat();
- newLng = lastValidCenter.lng();
- if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
- newLng = center.lng();
- }
- if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
- newLat = center.lat();
- }
- map.panTo(new google.maps.LatLng(newLat, newLng));
- });
- }
- google.maps.event.addDomListener(window, 'load', initialize);
- </script>
- </head>
- <body>
- <div id="map-canvas"/>
- </body>
- </html>
- // Limit panning
- var lastCenter = map.getCenter();
- google.maps.event.addListener(map, 'dragstart', function() {
- lastCenter = map.getCenter();
- });
- google.maps.event.addListener(map, 'dragend', function() {
- if(allowedBounds.contains(map.getCenter())) return;
- map.setCenter(lastCenter);
- });
- var latlng = new google.maps.LatLng(18.283078,84.047556);
- var myOptions = {
- zoom: 12,
- center: latlng,
- zoomControl: false,
- mapTypeId: google.maps.MapTypeId.ROADMAP,
- scrollwheel: false,
- navigationControl: false,
- mapTypeControl: false,
- scaleControl: false,
- draggable: false,
- disableDoubleClickZoom: true,
- };
- map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
- map = new google.maps.Map( // defaults
- document.getElementById("map22"),
- {
- disableDefaultUI : true,
- zoomControl : true,
- zoom : 7,
- minZoom : 7,
- maxZoom : 10,
- center : new google.maps.LatLng(
- 64.99473104134819,
- -19.22332763671875
- ),
- mapTypeId : google.maps.MapTypeId.ROADMAP
- }
- );
- function borders(){
- return {
- maxLat : map.getBounds().getNorthEast().lat(),
- maxLng : map.getBounds().getNorthEast().lng(),
- minLat : map.getBounds().getSouthWest().lat(),
- minLng : map.getBounds().getSouthWest().lng(),
- center : map.getCenter()
- }
- }
- google.maps.event.addListenerOnce(map,'idle',function() {
- limit = borders();
- });
- google.maps.event.addListener(map,'drag',function() {
- if(map.getZoom() == 7) return map.setCenter(limit.center);
- current = borders();
- if( current.maxLng < limit.maxLng && current.minLng > limit.minLng ) activeCenterLng = current.center.lng();
- if( current.maxLat < limit.maxLat && current.minLat > limit.minLat ) activeCenterLat = current.center.lat();
- map.setCenter(
- new google.maps.LatLng(
- activeCenterLat,
- activeCenterLng
- )
- );
- });
- google.maps.event.addListener(map, 'center_changed', function() {
- var mapBounds = map.getBounds();
- if(allowedBounds.contains(mapBounds.getNorthEast()) && allowedBounds.contains(mapBounds.getSouthWest())) {
- lastCenter = map.getCenter();
- return;
- }
- map.panTo(lastCenter);
- }, this));
- google.maps.event.addListener(map, 'center_changed', function(){
- checkBounds();
- });
- function checkBounds() {
- //console.log("call uit");
- // Perform the check and return if OK
- console.log(map.getCenter());
- if (bounds.contains(map.getCenter())) {
- return;
- }
- // It`s not OK, so find the nearest allowed point and move there
- var C = map.getCenter();
- var X = C.lng();
- var Y = C.lat();
- var AmaxX = bounds.getNorthEast().lng();
- var AmaxY = bounds.getNorthEast().lat();
- var AminX = bounds.getSouthWest().lng();
- var AminY = bounds.getSouthWest().lat();
- if (X < AminX) {X = AminX;}
- if (X > AmaxX) {X = AmaxX;}
- if (Y < AminY) {Y = AminY;}
- if (Y > AmaxY) {Y = AmaxY;}
- console.log("Restricting "+Y+" "+X);
- map.setCenter( new google.maps.LatLng(Y,X));
- //showLatlong();
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement