Advertisement
Guest User

Untitled

a guest
Jul 23rd, 2014
208
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.09 KB | None | 0 0
  1. // bounds of the desired area
  2. var allowedBounds = new google.maps.LatLngBounds(
  3. new google.maps.LatLng(70.33956792419954, 178.01171875),
  4. new google.maps.LatLng(83.86483689701898, -88.033203125)
  5. );
  6. var lastValidCenter = map.getCenter();
  7.  
  8. google.maps.event.addListener(map, 'center_changed', function() {
  9. if (allowedBounds.contains(map.getCenter())) {
  10. // still within valid bounds, so save the last valid position
  11. lastValidCenter = map.getCenter();
  12. return;
  13. }
  14.  
  15. // not valid anymore => return to last valid position
  16. map.panTo(lastValidCenter);
  17. });
  18.  
  19. <!DOCTYPE html>
  20. <html>
  21. <head>
  22. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  23. <title>Google Maps JavaScript API v3 Example: Limit Panning</title>
  24. <script type="text/javascript"
  25. src="http://maps.google.com/maps/api/js?sensor=false"></script>
  26. </head>
  27. <body>
  28. <div id="map" style="width: 400px; height: 300px;"></div>
  29.  
  30. <script type="text/javascript">
  31.  
  32. var minZoomLevel = 5;
  33.  
  34. var map = new google.maps.Map(document.getElementById('map'), {
  35. zoom: minZoomLevel,
  36. center: new google.maps.LatLng(38.50, -90.50),
  37. mapTypeId: google.maps.MapTypeId.ROADMAP
  38. });
  39.  
  40. // Bounds for North America
  41. var allowedBounds = new google.maps.LatLngBounds(
  42. new google.maps.LatLng(28.70, -127.50),
  43. new google.maps.LatLng(48.85, -55.90));
  44.  
  45. // Listen for the dragend event
  46. google.maps.event.addListener(map, 'dragend', function() {
  47. if (allowedBounds.contains(map.getCenter())) return;
  48.  
  49. // Out of bounds - Move the map back within the bounds
  50.  
  51. var c = map.getCenter(),
  52. x = c.lng(),
  53. y = c.lat(),
  54. maxX = allowedBounds.getNorthEast().lng(),
  55. maxY = allowedBounds.getNorthEast().lat(),
  56. minX = allowedBounds.getSouthWest().lng(),
  57. minY = allowedBounds.getSouthWest().lat();
  58.  
  59. if (x < minX) x = minX;
  60. if (x > maxX) x = maxX;
  61. if (y < minY) y = minY;
  62. if (y > maxY) y = maxY;
  63.  
  64. map.setCenter(new google.maps.LatLng(y, x));
  65. });
  66.  
  67. // Limit the zoom level
  68. google.maps.event.addListener(map, 'zoom_changed', function() {
  69. if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
  70. });
  71.  
  72. </script>
  73. </body>
  74. </html>
  75.  
  76. <!DOCTYPE html>
  77. <html>
  78. <head>
  79. <style type="text/css">
  80. html { height: 100% }
  81. body { height: 100%; margin: 0; padding: 0 }
  82. #map-canvas { height: 100% }
  83. </style>
  84. <script type="text/javascript"
  85. src="http://maps.google.com/maps/api/js?sensor=false"></script>
  86. </script>
  87. <script type="text/javascript">
  88. function initialize() {
  89. var mapOptions = {
  90. center: new google.maps.LatLng(28.70, -127.50),
  91. zoom: 4,
  92. mapTypeId: google.maps.MapTypeId.ROADMAP
  93. };
  94. var map = new google.maps.Map(document.getElementById("map-canvas"),
  95. mapOptions);
  96.  
  97. // bounds of the desired area
  98. var allowedBounds = new google.maps.LatLngBounds(
  99. new google.maps.LatLng(28.70, -127.50),
  100. new google.maps.LatLng(48.85, -55.90)
  101. );
  102. var boundLimits = {
  103. maxLat : allowedBounds.getNorthEast().lat(),
  104. maxLng : allowedBounds.getNorthEast().lng(),
  105. minLat : allowedBounds.getSouthWest().lat(),
  106. minLng : allowedBounds.getSouthWest().lng()
  107. };
  108.  
  109. var lastValidCenter = map.getCenter();
  110. var newLat, newLng;
  111. google.maps.event.addListener(map, 'center_changed', function() {
  112. center = map.getCenter();
  113. if (allowedBounds.contains(center)) {
  114. // still within valid bounds, so save the last valid position
  115. lastValidCenter = map.getCenter();
  116. return;
  117. }
  118. newLat = lastValidCenter.lat();
  119. newLng = lastValidCenter.lng();
  120. if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
  121. newLng = center.lng();
  122. }
  123. if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
  124. newLat = center.lat();
  125. }
  126. map.panTo(new google.maps.LatLng(newLat, newLng));
  127. });
  128. }
  129. google.maps.event.addDomListener(window, 'load', initialize);
  130. </script>
  131. </head>
  132. <body>
  133. <div id="map-canvas"/>
  134. </body>
  135. </html>
  136.  
  137. // Limit panning
  138. var lastCenter = map.getCenter();
  139.  
  140. google.maps.event.addListener(map, 'dragstart', function() {
  141. lastCenter = map.getCenter();
  142. });
  143.  
  144. google.maps.event.addListener(map, 'dragend', function() {
  145. if(allowedBounds.contains(map.getCenter())) return;
  146.  
  147. map.setCenter(lastCenter);
  148. });
  149.  
  150. var latlng = new google.maps.LatLng(18.283078,84.047556);
  151. var myOptions = {
  152. zoom: 12,
  153.  
  154. center: latlng,
  155. zoomControl: false,
  156. mapTypeId: google.maps.MapTypeId.ROADMAP,
  157. scrollwheel: false,
  158. navigationControl: false,
  159. mapTypeControl: false,
  160. scaleControl: false,
  161. draggable: false,
  162. disableDoubleClickZoom: true,
  163. };
  164. map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  165.  
  166. map = new google.maps.Map( // defaults
  167. document.getElementById("map22"),
  168. {
  169. disableDefaultUI : true,
  170. zoomControl : true,
  171. zoom : 7,
  172. minZoom : 7,
  173. maxZoom : 10,
  174. center : new google.maps.LatLng(
  175. 64.99473104134819,
  176. -19.22332763671875
  177. ),
  178. mapTypeId : google.maps.MapTypeId.ROADMAP
  179. }
  180. );
  181.  
  182.  
  183.  
  184. function borders(){
  185. return {
  186. maxLat : map.getBounds().getNorthEast().lat(),
  187. maxLng : map.getBounds().getNorthEast().lng(),
  188. minLat : map.getBounds().getSouthWest().lat(),
  189. minLng : map.getBounds().getSouthWest().lng(),
  190. center : map.getCenter()
  191. }
  192. }
  193.  
  194. google.maps.event.addListenerOnce(map,'idle',function() {
  195. limit = borders();
  196. });
  197.  
  198. google.maps.event.addListener(map,'drag',function() {
  199. if(map.getZoom() == 7) return map.setCenter(limit.center);
  200. current = borders();
  201. if( current.maxLng < limit.maxLng && current.minLng > limit.minLng ) activeCenterLng = current.center.lng();
  202. if( current.maxLat < limit.maxLat && current.minLat > limit.minLat ) activeCenterLat = current.center.lat();
  203. map.setCenter(
  204. new google.maps.LatLng(
  205. activeCenterLat,
  206. activeCenterLng
  207. )
  208. );
  209. });
  210.  
  211. google.maps.event.addListener(map, 'center_changed', function() {
  212. var mapBounds = map.getBounds();
  213. if(allowedBounds.contains(mapBounds.getNorthEast()) && allowedBounds.contains(mapBounds.getSouthWest())) {
  214. lastCenter = map.getCenter();
  215. return;
  216. }
  217.  
  218. map.panTo(lastCenter);
  219. }, this));
  220.  
  221. google.maps.event.addListener(map, 'center_changed', function(){
  222. checkBounds();
  223. });
  224.  
  225. function checkBounds() {
  226.  
  227. //console.log("call uit");
  228.  
  229. // Perform the check and return if OK
  230. console.log(map.getCenter());
  231. if (bounds.contains(map.getCenter())) {
  232. return;
  233. }
  234. // It`s not OK, so find the nearest allowed point and move there
  235. var C = map.getCenter();
  236. var X = C.lng();
  237. var Y = C.lat();
  238.  
  239. var AmaxX = bounds.getNorthEast().lng();
  240. var AmaxY = bounds.getNorthEast().lat();
  241. var AminX = bounds.getSouthWest().lng();
  242. var AminY = bounds.getSouthWest().lat();
  243.  
  244. if (X < AminX) {X = AminX;}
  245. if (X > AmaxX) {X = AmaxX;}
  246. if (Y < AminY) {Y = AminY;}
  247. if (Y > AmaxY) {Y = AmaxY;}
  248.  
  249. console.log("Restricting "+Y+" "+X);
  250. map.setCenter( new google.maps.LatLng(Y,X));
  251.  
  252.  
  253. //showLatlong();
  254. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement