모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

기하학 라이브러리

  1. 개요
  2. 구면 기하학 개념
    1. 거리 및 영역 함수
    2. 탐색 함수
  3. 기하학 인코딩
  4. 폴리곤 및 폴리라인 함수
    1. containsLocation()
    2. isLocationOnEdge()

개요

이 문서에서는 google.maps.geometry 라이브러리 내에서 제공되는 기능만 다룹니다. 이 라이브러리는 Maps Javascript API를 로드할 때 기본적으로 로드되지 않습니다. libraries 부트스트랩 매개변수를 사용하여 명시적으로 지정해야 합니다.

자세한 내용은 라이브러리 개요를 참조하세요.

Google Maps JavaScript API 기하학 라이브러리는 지표면의 기하학적 데이터를 계산하기 위한 유틸리티 함수를 제공합니다. 이 라이브러리에는 3개의 네임스페이스가 포함되어 있습니다.

  • spherical에는 위도와 경도에서 각도와 거리, 영역을 계산할 수 있는 구면 기하학 유틸리티가 포함됩니다.
  • encoding인코딩된 폴리라인 알고리즘에 따라 폴리라인 경로를 인코딩/디코딩하는 유틸리티를 포함합니다.
  • poly에는 폴리곤 및 폴리라인과 관련된 연산을 위한 유틸리티 함수가 포함되어 있습니다.

google.maps.geometry 라이브러리는 클래스가 없는 대신 위의 네임스페이스에 정적 메서드가 포함되어 있습니다.

구면 기하학 개념

Google Maps JavaScript API 내의 이미지는 2차원이고 "평면"입니다. 그러나 지구는 3차원이며 대개회전 타원체 또는 더 간단히 보면 구체에 가깝습니다. Maps API 내에서 우리는 구체를 사용하고, 지구를 컴퓨터 화면 등의 2차원 평면에 표현하기 위해 Maps API는 프로젝션을 사용합니다.

2차원 프로젝션 내에서 모양이 실제와 다르게 보일 수 있습니다. 지도 프로젝션은 어느 정도의 왜곡은 반드시 필요하기 때문에 단순한 유클리드 기하학을 적용할 수 없는 경우가 많습니다. 예를 들어, 구체에서 두 지점 간의 최단거리는 직선이 아니라 큰 원(일종의 측지)으로, 구체 표면의 삼각형을 구성하는 각도를 합치면 180도가 넘습니다.

이러한 차이로 인해 구체(또는 프로젝션)에 대한 기하 함수는 구면 기하학을 사용하여 거리, 방위 및 영역 등의 구성체를 계산합니다. 이러한 구면 기하 구성체를 계산하는 유틸리티는 Maps API의 google.maps.geometry.spherical 네임스페이스에 포함되어 있습니다. 이 네임스페이스는 구면 좌표(위도와 경도)에서 스칼라 값을 계산하기 위한 정적 메서드를 제공합니다.

거리 및 영역 함수

두 지점 간의 거리는 두 지점을 잇는 최단 경로의 길이입니다. 이 최단 경로를 측지(geodesic)라고 합니다. 구체에서 모든 측지는 거대한 원의 세그먼트입니다. 이 거리를 계산하려면 computeDistanceBetween()을 호출하고 2개의 LatLng 객체에 전달합니다.

여러 위치가 있는 경우, 대신 computeLength()를 사용하여 주어진 경로의 길이를 계산할 수 있습니다.

거리 결과는 미터 단위로 표현됩니다.

폴리곤 영역의 면적(제곱 미터)을 계산하려면 computeArea()를 호출하고 폐쇄 루프를 정의하는 LatLng 객체의 배열을 전달합니다.

구체를 탐색할 때 방위는 고정된 기준점(일반적으로 정북)에서 방향의 각도를 나타냅니다. Google Maps API에서 방위는 정북에서 도(degree) 기준으로 정의됩니다. 여기서 방위는 정북(0도)에서부터 시계 방향으로 측정됩니다. computeHeading() 메서드를 호출하고 fromto LatLng 객체에 전달하여 두 위치 간의 방위를 계산할 수 있습니다.

특정 방위, 원점 위치, 이동 거리(미터 단위)가 주어졌을 때, computeOffset()을 사용하여 도착지 좌표를 계산할 수 있습니다.

2개의 LatLng 객체와 0~1 사이의 값이 주어진 경우, interpolate() 메서드를 사용하여 목적지를 계산할 수도 있습니다. 이 메서드는 두 위치 간에 구면 선형 보간을 수행하며, 여기에서 값은 출발지에서 목적지까지 경로를 따라 이동하는 부분 거리를 나타냅니다.

다음 예시는 지도에서 두 지점을 클릭하면 두 개의 폴리라인을 생성하고(하나는 측지이고 다른 하나는 두 위치를 잇는 "직선"), 두 지점 간에 이동하는 방위를 계산합니다.

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

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

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

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

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}
<div id="map"></div>
<div id="floating-panel">
  Origin: <input type="text" readonly id="origin">
  Destination: <input type="text" readonly id="destination"><br>
  Heading: <input type="text" readonly id="heading"> degrees
</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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

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

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

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

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}

예시 보기(geometry-headings.html).

인코딩 메서드

Google Maps JavaScript API 내의 경로는 대개 LatLng 객체의 Array로 지정됩니다. 그러나 이러한 배열은 전달하기에는 용량이 큰 경우가 많습니다. 대신 Google의 폴리라인 인코딩 알고리즘을 사용하여 주어진 경로를 압축하고, 나중에 디코딩을 통해 압축을 해제할 수 있습니다.

geometry 라이브러리에는 폴리라인을 인코딩/디코딩하는 유틸리티를 위한 encoding 네임스페이스가 포함되어 있습니다.

정적 메서드 encodePath()는 주어진 경로를 인코딩합니다. LatLng의 배열 또는 (Polyline.getPath()에 의해 반환된) MVCArray를 전달할 수 있습니다.

인코딩된 경로를 디코딩하려면 decodePath()를 호출하고 이 메서드를 인코딩된 문자열에 전달하면 됩니다.

다음 예시는 미시시피 주 옥스퍼드 지도를 표시합니다. 지도를 클릭하면 폴리라인에 점이 추가됩니다. 폴리라인이 생성되면 그 아래에 인코딩이 나타납니다.

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}
<div id="map"></div>
<div id="right-panel">
  <div>Encoding:</div>
  <textarea id="encoded-polyline"></textarea>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 50%;
  float: left;
}
#right-panel {
  width: 46%;
  float: left;
}
#encoded-polyline {
  height: 100px;
  width: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}

예시 보기(geometry-encodings.html).

폴리곤 및 폴리라인 함수

기하학 라이브러리의 poly 네임스페이스에는 주어진 점이 폴리곤 또는 폴리라인 내부나 근처에 있는지 알아내는 유틸리티 함수가 포함되어 있습니다.

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

주어진 점이 폴리곤 안에 있는지 알아내려면 해당 점과 폴리곤을 google.maps.geometry.poly.containsLocation()에 전달합니다. 점이 폴리곤 내에 있거나 가장자리에 있으면 이 함수는 true를 반환합니다.

다음 코드는 사용자의 클릭이 정의된 삼각형 안에서 발생하면 브라우저 콘솔에 'true'를 표시하고, 그렇지 않으면 'false'를 표시합니다.

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886, -70.269),
    mapTypeId: 'terrain'
  };

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

  var bermudaTriangle = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
    ]
  });

  google.maps.event.addListener(map, 'click', function(event) {
    console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

이 코드의 다른 버전은 클릭이 버뮤다 삼각지대 안에서 발생하면 빨간색 원을 그리고, 그렇지 않으면 녹색 원을 그립니다.

예시 보기(poly-containsLocation)

isLocationOnEdge()

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

어떤 점이 폴리라인 또는 폴리곤 가장자리에 있거나 가장자리 근처에 있는지 알아내려면 그 점과 폴리라인/폴리곤 및 선택적으로 도 단위의 허용 오차 값을 google.maps.geometry.poly.isLocationOnEdge()에 전달합니다. 이 함수는 그 점과 선이나 가장자리에서 가장 가까운 점 사이의 거리가 지정된 허용 오차 내에 있으면 true를 반환합니다. 기본 허용 오차 값은 10-9도입니다.

function initialize() {
  var myPosition = new google.maps.LatLng(46.0, -125.9);

  var mapOptions = {
    zoom: 5,
    center: myPosition,
    mapTypeId: 'terrain'
  };

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

  var cascadiaFault = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(49.95, -128.1),
      new google.maps.LatLng(46.26, -126.3),
      new google.maps.LatLng(40.3, -125.4)
    ]
  });

  cascadiaFault.setMap(map);

  if (google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1)) {
    alert("Relocate!");
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

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

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