It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Restricting Map Bounds

This example creates a map that starts in Auckland, New Zealand. The map is restricted to New Zealand. The user can pan away from Auckland and explore other New Zealand cities, but the user cannot pan or zoom to another country.

Try panning north, or zooming out.

Read the documentation.

JavaScript

var map;
var NEW_ZEALAND_BOUNDS = {
  north: -34.36,
  south: -47.35,
  west: 166.28,
  east: -175.81
};
var AUCKLAND = { lat: -37.06, lng: 174.58 };

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: AUCKLAND,
    restriction: {
      latLngBounds: NEW_ZEALAND_BOUNDS,
      strictBounds: false
    },
    zoom: 7
  });
}

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Map Bounds Restriction</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Map Bounds Restriction</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      (function(exports) {
        "use strict";

        var NEW_ZEALAND_BOUNDS = {
          north: -34.36,
          south: -47.35,
          west: 166.28,
          east: -175.81
        };
        var AUCKLAND = {
          lat: -37.06,
          lng: 174.58
        };

        function initMap() {
          exports.map = new google.maps.Map(document.getElementById("map"), {
            center: AUCKLAND,
            restriction: {
              latLngBounds: NEW_ZEALAND_BOUNDS,
              strictBounds: false
            },
            zoom: 7
          });
        }

        exports.AUCKLAND = AUCKLAND;
        exports.NEW_ZEALAND_BOUNDS = NEW_ZEALAND_BOUNDS;
        exports.initMap = initMap;
      })((this.window = this.window || {}));
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
(function(exports) { "use strict"; var NEW_ZEALAND_BOUNDS = { north: -34.36, south: -47.35, west: 166.28, east: -175.81 }; var AUCKLAND = { lat: -37.06, lng: 174.58 }; function initMap() { exports.map = new google.maps.Map(document.getElementById("map"), { center: AUCKLAND, restriction: { latLngBounds: NEW_ZEALAND_BOUNDS, strictBounds: false }, zoom: 7 }); } exports.AUCKLAND = AUCKLAND; exports.NEW_ZEALAND_BOUNDS = NEW_ZEALAND_BOUNDS; exports.initMap = initMap; })((this.window = this.window || {}));
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<!DOCTYPE html> <html> <head> <title>Map Bounds Restriction</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>