0

I want to limit bounds between using a lat & Lng co-ords, if the co-ords hits the bounds then the map, should not be draggable.

The script loads fine, in addition to my styedMap (variable). However I cannot seem to merge this code snippet - How do I limit panning in Google maps API V3?, into my own.

NOTE: the IF Statement just checks whether a Data Attr is present, so the code is invoked.

function area_page_map() {
    var mapOptions = {
        center:             new google.maps.LatLng(51.5697317,-1.7923051),
        minZoom:            11,
        maxZoom:            20,
        zoom:               11,
        scrollwheel:        false,
        scaleControl:       false,
        streetViewControl:  false,
        mapTypeControl:     false,
        mapTypeId:          google.maps.MapTypeId.ROADMAP
    };

    var allowedBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(51.4380251,-2.047586), 
         new google.maps.LatLng(51.6556491,-1.6716272)
    );

    var lastValidCenter = map.getCenter();

    google.maps.event.addListener(map, 'center_changed', function() {
        if (allowedBounds.contains(map.getCenter())) {
            lastValidCenter = map.getCenter();
            return; 
        }

        // not valid anymore => return to last valid position
        map.panTo(lastValidCenter);
    });

    var map = new google.maps.Map(document.getElementById("area__map"), mapOptions);

      // Associate the styled map
      map.mapTypes.set('area__map', styledMap);
      map.setMapTypeId('area__map');
}

if ( $area__page__map.length ){
    google.maps.event.addDomListener(window, 'load', area_page_map);
}

If there also a means to trigger a function when the bounds are met, that would be great.. E.g. map wrapper red border.

-Many thanks

Community
  • 1
  • 1
Neil
  • 971
  • 2
  • 12
  • 33
  • I don't see anything in your code to limit the map to any bounds. What did you try that didn't work? – geocodezip Jul 31 '14 at 17:23
  • I have updated the code, the map loads fine. However it does not drag. I am unsure whether the boundary is locking me in or I am merged it incorrectly. – Neil Aug 01 '14 at 09:01
  • [Your code works for me (with minor fixes to get it to work in the fiddle)](http://jsfiddle.net/w2xLP/) – geocodezip Aug 01 '14 at 17:06
  • Thanks for checking it must me another function issue.. The original need was to place a boundary for contracting jobs. However If a visitor scrolls in will there be more visible map on the screen? As the job radius would inadvertently increase. – Neil Aug 02 '14 at 17:27
  • @geocodezip I have removed the other map and found an error = Uncaught TypeError: Cannot read property 'getCenter' of undefined. Any idea why I am getting this? – Neil Aug 04 '14 at 10:57

0 Answers0