I'm looking for a way to set boundaries around a specific city/town within the Google maps API V3 using JavaScript

Is this type of thing even supported within the API?

Basically i don't want my users to be able to pan across the map further then the city, including country area's not just city limits.

I'm looking for a way to set boundaries around a specific city/town within the Google maps API V3 using JavaScript

Is this type of thing even supported within the API?

Basically i don't want my users to be able to pan across the map further then the city, including country area's not just city limits.

• javascript
• google-maps
• google-maps-api-3
• google-maps-styling

3 Answers 3

well the boundry that you want to provide to the city/ town can be done. you just need to draw the polylines or polygons specifying the co ordinates of the boundries of the city.
visit demos and documentation for overlays in Gmap V3

try the following code to restrict user to pan across the region.

 // 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));
   });

this will restrict user to pan across region of north america

You need to get the points for boundries of the city, then you can create a polyline. For example, one idea could be similar to this:

limitCoord = [
    new google.maps.LatLng(42.49956716,-7.019005501),
    new google.maps.LatLng(42.49947126,-7.029286373),
    new google.maps.LatLng(42.50904062,-7.049299123),
    new google.maps.LatLng(42.50722622,-7.069103626),
    new google.maps.LatLng(42.50452387,-7.000150672),
    new google.maps.LatLng(42.49348015,-6.983058917),
    new google.maps.LatLng(42.49843269,-6.971666546),
    new google.maps.LatLng(42.51765791,-6.956909023),
    new google.maps.LatLng(42.52010069,-6.927429186),
    new google.maps.LatLng(42.50992238,-6.914231493),
    new google.maps.LatLng(42.50096695,-6.879679821),
    new google.maps.LatLng(42.48775868,-6.857775832),
    new google.maps.LatLng(43.23907504,-3.293216584)], "#000000", 5);

var boundries = new google.maps.Polyline({
    path: limitCoord,
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

1. Use map.fitBounds() or map.setCenter() to center the city/country/region on the map.
2. Use draggable: false option to disable panning.