Restricting The Bounds Of The Map

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.

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,
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 425px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Try it yourself

You can experiment with this code in JSFiddle by clicking the <> icon in the top-right corner of the code window.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Map Bounds Restriction</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 425px;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      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,
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

다음에 대한 의견 보내기...

Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.