모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

최대 확대/축소 이미지 서비스

  1. 최대 확대/축소 이미지
  2. MaxZoom 요청
  3. MaxZoom 응답

개요

Google Maps API는 지도 유형 이미지에 대해 다양한 확대/축소 수준에서 지도 타일을 제공합니다. 예컨대 대부분의 도로 지도 이미지는 확대/축소 수준 0~18 사이에서 이용할 수 있습니다. 위성 이미지는 생성되는 것이 아니라 직접 사진으로 촬영하므로 더욱 다양합니다.

위성 이미지는 멀리 떨어진 위치(낮은 밀도로 산재된 영역 또는 개방된 바다 영역)의 경우 높은 확대/축소 수준에서 제공하지 못할 수도 있습니다. 사전에 특정 위치의 최대 확대/축소 수준이 얼마인지 알고 싶을 수도 있습니다. MaxZoomService 객체는 Google 지도가 위성 이미지를 보유한 특정 위치의 최대 확대/축소 수준을 알아내기 위한 간단한 인터페이스를 제공합니다.

MaxZoom 요청

Google Maps API는 외부 서버를 호출해야 하므로 MaxZoomService 액세스는 비동기식입니다. 그러므로 콜백 메서드를 전달하여 요청이 완료되면 실행해야 합니다. 이 콜백 메서드가 결과를 처리해야 합니다.

MaxZoomService 요청을 시작하려면 getMaxZoomAtLatLng()를 호출하고 위치의 LatLng와 요청 완료 시 실행할 콜백 함수를 전달하면 됩니다.

MaxZoom 응답

getMaxZoomAtLatLng()콜백 함수를 실행할 때 다음 2개의 매개변수를 다시 전달합니다.

  • status는 요청의 MaxZoomStatus를 포함합니다.
  • zoom에는 확대/축소 수준이 포함됩니다. 어떤 이유로 서비스가 실패하면, 이 값이 존재하지 않게 됩니다.

status 코드는 다음 값 중 하나를 반환합니다.

  • OK는 서비스가 위성 이미지의 최대 확대/축소 수준을 찾았음을 나타냅니다.
  • ERROR는 MaxZoom 요청을 처리하지 못했음을 나타냅니다.

다음 예시는 대도시 도쿄의 지도를 보여줍니다. 지도에서 아무 곳이나 클릭하면 해당 위치의 최대 확대/축소 수준이 나타납니다. (일반적으로 도쿄 주변의 확대/축소 수준은 18~21입니다.)

var map;
var maxZoomService;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.6894, lng: 139.692},
    mapTypeId: 'hybrid'
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener('click', showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.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>
var map;
var maxZoomService;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.6894, lng: 139.692},
    mapTypeId: 'hybrid'
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener('click', showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}

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

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

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