모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

셰이프

지도에 다양한 셰이프를 추가할 수 있습니다. 셰이프는 지도 위의 객체로, 위도/경도 좌표와 연결되어 있습니다. 이용 가능한 셰이프: , 폴리곤, 사각형. 사용자가 셰이프를 수정하거나 드래그할 수 있도록 셰이프를 구성할 수도 있습니다.

폴리라인

지도에 선을 그리려면 폴리라인을 사용합니다. Polyline 클래스는 지도에 연결된 선 세그먼트의 선형 오버레이를 정의합니다. Polyline 객체는 LatLng 위치의 배열로 구성되고, 순차적 시퀀스에 따라 이러한 위치를 연결하는 일련의 선 세그먼트를 생성합니다.

폴리라인 추가

Polyline 생성자는 선의 LatLng 좌표와 스타일 집합을 지정하는 PolylineOptions 집합을 취하고, 폴리라인의 시각적 동작을 조절합니다.

Polyline 객체는 지도에 일련의 직선 세그먼트로 그려집니다. 선을 생성할 때 PolylineOptions에서 선 스트로크의 사용자 지정 색상, 두께, 불투명도를 지정하거나, 생성한 후에 이러한 속성들을 변경할 수 있습니다. 폴리라인은 다음 스트로크 스타일을 지원합니다.

  • strokeColor"#FFFFFF" 형식의 16진수 HTML 색상을 지정합니다. Polyline 클래스는 이름이 지정된 색상을 지원하지 않습니다.
  • strokeOpacity0.0~1.0의 숫자 값을 지정하여 선 색상의 불투명도를 결정합니다. 기본값은 1.0입니다.
  • strokeWeight는 선의 너비를 픽셀 단위로 지정합니다.

폴리라인의 editable 속성은 사용자가 셰이프를 수정할 수 있는지 여부를 지정합니다. 아래의 사용자 편집 가능 셰이프를 참조하세요. 마찬가지로 사용자가 선을 드래그할 수 있도록 draggable 속성을 설정할 수 있습니다.

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

예시 보기(polyline-simple.html).

폴리라인 제거

지도에서 폴리라인을 제거하려면 setMap() 메서드를 호출하고 null을 인수로 전달합니다. 다음 예시에서 flightPath는 폴리라인 객체입니다.

flightPath.setMap(null);

이 메서드는 폴리라인을 삭제하지 않습니다. 단지 지도에서 폴리라인을 제거할 뿐입니다. 폴리라인을 삭제하려면 지도에서 삭제한 다음 폴리라인 자체를 null로 설정해야 합니다.

예시 보기(polyline-remove.html).

폴리라인 검사

폴리라인은 일련의 좌표를 LatLng 객체의 배열로 지정합니다. 이러한 좌표는 선의 경로를 결정합니다. 좌표를 검색하려면 getPath()를 호출합니다. MVCArray 유형의 배열이 반환될 것입니다. 다음 작업으로 배열을 조작하고 검사할 수 있습니다.

  • getAt()는 주어진 0 기반 인덱스 값에서 LatLng를 반환합니다.
  • insertAt()는 주어진 0 기반 인덱스 값에서 전달된 LatLng를 삽입합니다. 해당 인덱스 값의 기존 좌표는 앞으로 이동합니다.
  • removeAt()는 주어진 0 기반 인덱스 값에서 LatLng를 삭제합니다.
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

예시 보기(polyline-complex.html).

폴리라인 사용자 지정

벡터 기반 이미지를 기호의 형태로 폴리라인에 추가할 수 있습니다. 기호와 PolylineOptions 클래스를 조합하면 지도에서 폴리라인 디자인의 많은 부분을 제어할 수 있습니다. 화살표, 점선, 사용자 지정 기호애니메이트된 기호에 대한 내용은 기호를 참조하세요.

폴리곤

폴리곤은 폐쇄된 경로(또는 루프)로 둘러싸인 영역을 나타나며, 일련의 좌표로 정의됩니다. Polygon 객체는 순차적 시퀀스에 따라 일련의 좌표로 구성된다는 점에서 Polyline 객체와 유사합니다. 폴리곤은 스트로크와 채우기로 그려집니다. 폴리곤 가장자리(스트로크)의 사용자 지정 색상, 두께, 불투명도와 닫힌 영역(채우기)의 사용자 지정 색상 및 불투명도를 정의할 수 있습니다. 색상은 16진수 HTML 형식으로 나타내야 합니다. 색상 이름은 지원되지 않습니다.

Polygon 객체는 다음을 포함한 복잡한 셰이프를 나타낼 수 있습니다.

  • 단일 폴리곤으로 정의된 다수의 비인접 영역.
  • 구멍이 있는 영역.
  • 하나 이상의 영역의 교차.

복잡한 셰이프를 정의하려면 다중 경로가 포함된 폴리곤을 사용합니다.

참고: 데이터 계층은 폴리곤을 그리는 간단한 방법을 제공합니다. 폴리곤 와인딩을 대신 처리해주기 때문에 구멍이 있는 폴리곤을 쉽게 그릴 수 있습니다. 데이터 계층 관련 문서를 참조하세요.

폴리곤 추가

폴리곤 영역은 여러 개별 경로가 포함될 수 있으므로 Polygon 객체의 paths 속성은 각각 MVCArray 유형인 배열들로 구성된 배열을 지정합니다. 각 배열은 순차적인 LatLng 좌표의 별도 시퀀스를 정의합니다.

하나의 경로로만 구성된 단순한 폴리곤의 경우, LatLng 좌표의 단일 배열을 사용하여 Polygon을 생성할 수 있습니다. Google Maps JavaScript API는 단순 배열을 paths 속성 내에 저장할 때 생성 시 배열들로 구성된 배열로 변환합니다. 이 API는 하나의 경로로 구성된 폴리곤에 간단한 getPath() 메서드를 제공합니다.

폴리곤의 editable 속성은 사용자가 셰이프를 수정할 수 있는지 여부를 지정합니다. 아래의 사용자 편집 가능 셰이프를 참조하세요. 마찬가지로 사용자가 셰이프를 드래그할 수 있도록 draggable 속성을 설정할 수 있습니다.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

예시 보기(polygon-simple.html).

폴리곤 자동완성

위 예시의 Polygon은 4개의 LatLng 좌표 집합으로 구성되지만, 첫 번째와 마지막 좌표 집합은 같은 위치로, 루프를 완성합니다. 그러나 실제로 폴리곤은 폐쇄된 영역으로 정의되므로 마지막 좌표 집합을 지정할 필요가 없습니다. Google Maps JavaScript API는 임의의 주어진 경로에 대해 마지막 위치와 처음 위치를 연결하는 스트로크를 그리는 방식으로 폴리곤을 자동으로 완성합니다.

다음 예시는 이전 예시와 동일하지만, 마지막 LatLng만 빠져 있습니다. 예시 보기(polygon-autoclose.html).

폴리곤 제거

지도에서 폴리곤을 제거하려면 setMap() 메서드를 호출하고 null을 인수로 전달합니다. 다음 예시에서 bermudaTriangle은 폴리곤 객체입니다.

bermudaTriangle.setMap(null);

이 메서드는 폴리곤을 삭제하지 않습니다. 단지 지도에서 폴리곤을 제거할 뿐입니다. 폴리곤을 삭제하려면 지도에서 삭제한 다음 폴리곤 자체를 null로 설정해야 합니다.

폴리곤 검사

폴리곤은 일련의 좌표를 배열들로 구성된 배열로 지정하며, 여기서 각 배열은 MVCArray 유형입니다. 각 "리프" 배열은 단일 경로를 지정하는 LatLng 좌표의 배열입니다. 이러한 좌표를 검색하려면 Polygon 객체의 getPaths() 메서드를 호출합니다. 배열은 MVCArray이므로 다음 작업을 통해 배열을 조작 및 검사해야 합니다.

  • getAt()는 주어진 0 기반 인덱스 값에서 LatLng를 반환합니다.
  • insertAt()는 주어진 0 기반 인덱스 값에서 전달된 LatLng를 삽입합니다. 해당 인덱스 값의 기존 좌표는 앞으로 이동합니다.
  • removeAt()는 주어진 0 기반 인덱스 값에서 LatLng를 삭제합니다.
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

예시 보기(polygon-arrays.html).

폴리곤에 구멍 만들기

빈 영역이 있는 폴리곤을 만들려면 하나의 경로 안에 다른 하나가 들어가 있는 두 개의 경로를 생성해야 합니다. 구멍을 만들려면 안쪽 경로를 정의하는 좌표가 바깥쪽 경로를 정의하는 좌표와 순서가 반대여야 합니다. 예를 들어 바깥쪽 경로 좌표가 시계 방향이라면 안쪽 경로는 반시계 방향이어야 합니다.

참고: 데이터 계층이 안쪽과 바깥쪽 경로 순서를 대신 처리해주므로 구멍이 있는 폴리곤을 쉽게 그릴 수 있습니다. 데이터 계층 관련 문서를 참조하세요.

다음 예시에서는 안쪽 경로가 바깥쪽 경로와 반대 방향으로 돌아가는 두 개의 경로를 그립니다.

// This example creates a triangular polygon with a hole in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
  });

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
// This example creates a triangular polygon with a hole in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
  });

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

예시 보기(polygon-hole.html).

사각형

일반 Polygon 클래스와 더불어 Google Maps JavaScript API는 Rectangle 객체의 특정 클래스를 포함하여 구조를 단순화합니다.

사각형 추가

Rectangle은 사각형 가장자리(스트로크)의 사용자 지정 색상, 두께, 불투명도와 사각형 내부 영역(채우기)의 사용자 지정 색상, 불투명도를 정의할 수 있다는 점에서 Polygon과 유사합니다. 색상은 16진수 HTML 스타일로 나타내야 합니다.

Polygon과 달리 Rectanglepaths를 정의하지 않습니다. 대신, 사각형은 bounds 속성이 있으며, 사각형의 google.maps.LatLngBounds 지정하는 방식으로 셰이프를 정의합니다.

사각형의 editable 속성은 사용자가 셰이프를 수정할 수 있는지 여부를 지정합니다. 아래의 사용자 편집 가능 셰이프를 참조하세요. 마찬가지로 사용자가 사격형을 드래그할 수 있도록 draggable 속성을 설정할 수 있습니다.

// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}

예시 보기(rectangle-simple.html).

다음 코드는 사용자가 지도의 확대/축소를 변경할 때마다 사각형을 생성합니다. 사각형의 크기는 뷰포트로 결정됩니다.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}

예시 보기(rectangle-zoom.html).

사각형 제거

지도에서 사각형을 제거하려면 setMap() 메서드를 호출하고 null을 인수로 전달합니다.

rectangle.setMap(null);

이 메서드는 사각형을 삭제하지 않습니다. 단지 지도에서 사각형을 제거할 뿐입니다. 사각형을 삭제하려면 지도에서 삭제한 다음 사각형 자체를 null로 설정해야 합니다.

일반 Polygon 클래스와 더불어 Google Maps JavaScript API는 Circle 객체의 특정 클래스를 포함하여 구조를 단순화합니다.

원 추가

Circle은 원 가장자리(스트로크)의 사용자 지정 색상, 두께, 불투명도와 원 내부 영역(채우기)의 사용자 지정 색상, 불투명도를 정의할 수 있다는 점에서 Polygon과 유사합니다. 색상은 16진수 HTML 스타일로 나타내야 합니다.

Polygon과 달리 Circlepaths를 정의하지 않습니다. 대신, 원은 셰이프를 정의하는 두 가지 추가 속성이 있습니다.

  • center는 원 중앙의 google.maps.LatLng를 지정합니다.
  • radius는 원의 반경을 미터 단위로 지정합니다.

원의 editable 속성은 사용자가 셰이프를 수정할 수 있는지 여부를 지정합니다. 아래의 사용자 편집 가능 셰이프를 참조하세요. 마찬가지로 사용자가 원을 드래그할 수 있도록 draggable 속성을 설정할 수 있습니다.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

예시 보기(circle-simple.html).

원 제거

지도에서 원을 제거하려면 setMap() 메서드를 호출하고 null을 인수로 전달합니다.

circle.setMap(null);

위의 메서드는 원을 삭제하지 않습니다. 단지 지도에서 원을 제거할 뿐입니다. 원을 삭제하려면 지도에서 삭제한 다음 원 자체를 null로 설정해야 합니다.

사용자 수정과 드래그가 가능한 셰이프

셰이프를 수정할 수 있게 하려면 셰이프에 핸들을 추가합니다. 이 핸들을 사용해서 지도에서 직접 셰이프의 위치와 형태, 크기를 변경할 수 있습니다. 셰이프를 지도의 다른 장소로 이동할 수 있도록 드래그 가능하게 만들 수도 있습니다.

사용자가 객체에 적용한 변경 사항은 세션 간에 유지되지 않습니다. 사용자의 편집 내용을 저장하려면 직접 정보를 캡처하고 저장해야 합니다.

수정 가능한 셰이프로 만들기

모든 셰이프(폴리라인, 폴리곤, 원, 사각형)는 셰이프의 옵션에서 editabletrue로 설정하여 사용자 수정이 가능하게 설정할 수 있습니다.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

예시 보기(user-editable-shapes.html).

드래그 가능한 셰이프로 만들기

기본적으로, 지도에 그려지는 셰이프는 위치가 고정됩니다. 사용자가 지도의 다른 위치로 셰이프를 드래그할 수 있게 하려면 셰이프 옵션에서 draggabletrue로 설정합니다.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

폴리곤이나 폴리라인에서 드래그를 활성화할 때, geodesic 속성을 true으로 설정해서 폴리곤이나 폴리라인을 측지로 만드는 것도 고려해야 합니다.

측지 폴리곤은 이동하더라도 실제 지리적 셰이프를 유지하므로, 메르카토르 도법에서 북쪽이나 남쪽으로 이동하면 폴리곤이 왜곡되어 보입니다. 비측지 폴리곤은 화면에서 언제나 처음 모습을 유지합니다.

측지 폴리라인에서 폴리라인의 세그먼트는 지구가 구체라고 가정하고 지표면의 두 지점을 잇는 최단 거리로 그려집니다. 메르카토르 도법에서는 직선입니다.

좌표계에 대한 자세한 내용은 MapTypes 문서를 참조하세요.

다음 지도는 대략 크기와 치수가 같은 2개의 삼각형을 보여줍니다. 빨간색 삼각형은 geodesic 속성이 true로 설정되었습니다. 북쪽으로 이동할 때 셰이프가 어떻게 바뀌는지 살펴봅니다.

예시 보기(polygon-draggable.html).

수정 이벤트 수신

셰이프가 수정되면 수정이 완료되는 즉시 이벤트가 발생합니다. 아래는 이러한 이벤트 목록입니다.

셰이프 이벤트
radius_changed
center_changed
폴리곤 insert_at
remove_at
set_at

리스너가 폴리곤의 경로에 설정되어야 합니다. 폴리곤에 다중 경로가 있는 경우, 리스너가 각 경로에 설정되어야 합니다.

폴리라인 insert_at
remove_at
set_at

리스너가 폴리라인의 경로에 설정되어야 합니다.

사각형 bounds_changed

몇 가지 유용한 코드 스니펫:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

사각형에서 수정 이벤트를 처리하는 예시 참조: 예시 보기(rectangle-event.html).

드래그 이벤트 수신

셰이프를 드래그하면 드래그 동작의 시작과 끝, 도중에 이벤트가 발생합니다. 폴리라인, 폴리곤, 원, 사각형에서 다음 이벤트가 발생합니다.

이벤트 설명
dragstart 사용자가 셰이프 드래그를 시작할 때 발생합니다.
drag 사용자가 셰이프를 드래그하는 동안 반복적으로 발생합니다.
dragend 사용자가 셰이프 드래그를 종료할 때 발생합니다.

이벤트 처리에 대한 자세한 내용은 이벤트 관련 문서를 참조하세요.

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

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