모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

그라운드 오버레이

  1. 소개
  2. 그라운드 오버레이 추가
  3. 그라운드 오버레이 제거

소개

오버레이는 위도/경도 좌표와 연동되어 있는 지도 위의 객체이므로 지도를 드래그하거나 확대/축소하면 움직입니다. 지도에 이미지를 배치하려는 경우, GroundOverlay 객체를 사용할 수 있습니다.

다른 유형의 오버레이에 관한 내용은 지도에 그리기를 참조하세요.

그라운드 오버레이 추가

GroundOverlay 생성자는 이미지의 URL과 이미지의 LatLngBounds를 매개변수로 지정합니다. 이미지는 주어진 경계 내에서 지도 위에 렌더링되고, 지도의 프로젝션을 사용하여 일치시킵니다.

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

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

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.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 uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

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

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

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

그라운드 오버레이 제거

지도에서 오버레이를 제거하려면 오버레이의 setMap() 메서드를 호출하고 null을 전달합니다. 이 메서드를 호출하더라도 오버레이가 삭제되지 않습니다. 단지 지도에서 오버레이를 제거할 뿐입니다. 오버레이를 삭제하려면 지도에서 삭제한 다음 오버레이 자체를 null로 설정해야 합니다.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

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

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

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