Geek Answers Handbook

Google Maps: Limit

I am trying to recreate the panorama constraint behavior as shown here: http://econym.org.uk/gmap/example_range.htm

Unfortunately, it uses the API version 2 instead of the current version 3. I update the commands so that they are current, but I think I might have missed something because it does not work:

<html> <body> <script type="text/javascript" src="http://meyouand.us/scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> $(document).ready(function() { // Generate map var latlng = new google.maps.LatLng(37.76201, -122.4375); var myOptions = { zoom: 12, center: latlng, panControl: false, zoomControl: true, mapTypeControl: false, streetViewControl: false, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("gmap"), myOptions); // Limit panning // The allowed region which the whole map must be within var southWest = new google.maps.LatLng(37.684, -122.591); var northEast = new google.maps.LatLng(37.836, -122.333); var allowedBounds = new google.maps.LatLngBounds(southWest, northEast); // Double check boundaries, plot points just in case var sW = new google.maps.Marker({ position: southWest, map: map, title: "southWest" }); var nE = new google.maps.Marker({ position: northEast, map: map, title: "northEast" }); // Add a move listener to restrict the bounds range google.maps.event.addListener(map, "dragend", function() { checkBounds(); }); // If the map position is out of range, move it back function checkBounds() { // Perform the check and return if OK if (allowedBounds.contains(map.getCenter())) { return; } // It 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 = allowedBounds.getNorthEast().lng(); var AmaxY = allowedBounds.getNorthEast().lat(); var AminX = allowedBounds.getSouthWest().lng(); var AminY = allowedBounds.getSouthWest().lat(); if (X < AminX) {X = AminX; alert('hi') } if (X > AmaxX) {X = AmaxX; alert('hi') } if (Y < AminY) {Y = AminY; alert('hi') } if (Y > AmaxY) {Y = AmaxY; alert('hi') } alert ("Restricting "+Y+" "+X); map.setCenter(new LatLng(Y,X)); } }); </script> <body> <div id="gmap" style="width: 480px; height: 440px;"></div> </body> </html>

Will anyone think of giving another set of eyes to see if I missed something ?: D

(There is another updated version 3 code here in StackOverflow titled “How do I restrict panning in the Google Maps API V3?” However, this behavior visually “snaps” backwards, and not just restricts movement outside borders.)

+7
source share
1 answer

Use the example from this post: Google Maps v3 - limit the scope and zoom level and change the map listener event from dragend to drag . I just tested it and it works as expected.

EDIT: Example in js fiddle

+1
source

More articles:


All Articles