모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

지도 유형

지도 유형

이 문서는 Google Maps JavaScript API를 사용하여 표시할 수 있는 지도 유형을 설명합니다. API는 MapType 객체를 사용하여 이러한 지도에 대한 정보를 보관합니다. MapType은 지도 타일의 표시와 사용, 화면 좌표에서 세계 좌표(지도)로의 좌표계 변환을 정의하는 인터페이스입니다. 각 MapType은 타일의 검색과 릴리스를 처리하는 몇 가지 메서드와 시각적 동작을 정의하는 속성을 포함해야 합니다.

Maps JavaScript API에서 지도 유형의 내부 동작은 고급 주제입니다. 대부분 개발자는 아래에 언급된 기본 지도 유형만 사용합니다. 그러나 사용자 지정 유형을 사용해서 지도 타일을 정의하거나 스타일 지정 지도로 기존 지도 유형의 표시를 수정할 수도 있습니다. 사용자 지정 지도 유형을 제공할 경우, 지도의 지도 유형 레지스트리를 수정하는 방법을 이해해야 합니다.

기본 지도 유형

Google Maps JavaScript API에서 사용할 수 있는 4가지 지도 유형이 있습니다. Maps JavaScript API는 친숙한 "채색" 도로 지도 타일뿐만 아니라 다른 지도 유형도 지원합니다.

Maps JavaScript API에서 다음 지도 유형을 사용할 수 있습니다.

  • roadmap은 기본 도로 지도 뷰를 표시합니다. 기본 지도 유형입니다.
  • satellite은 Google 어스 위성 이미지를 표시합니다.
  • hybrid는 일반 뷰와 위성 뷰를 섞어서 표시합니다.
  • terrain은 지형 정보를 기반으로 실제 지도를 표시합니다.

Map options 객체를 설정하여 생성자 내부에서, 또는 지도의 setMapTypeId() 메서드를 호출하여 mapTypeId 속성을 설정하면, Map이 사용 중인 지도 유형을 수정할 수 있습니다. mapTypeID 속성의 기본값은 roadmap입니다.

생성 시 mapTypeId 설정:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

동적으로 mapTypeId 수정:

map.setMapTypeId('terrain');

실제로는 지도의 지도 유형을 직접 설정하지는 않고, 대신 식별자를 사용하여 MapType을 참조하도록 mapTypeId를 설정합니다. Maps JavaScript API은 아래에 설명된 지도 유형 레지스트리를 사용하여 이러한 참조를 관리합니다.

45° 이미지

Google Maps JavaScript API는 특정 위치에 대해 특수한 45° 이미지를 지원합니다. 이 고해상도 이미지는 각 기본 방향(동, 서, 남, 북)에 원근 시점을 제공합니다. 이러한 이미지는 지원되는 지도 유형에 대해 높은 확대/축소 수준에서 이용할 수 있습니다.

다음 이미지는 캘리포니아 주 산타크루즈 보드워크의 45° 원근 시점을 보여줍니다.

satellitehybrid 지도 유형은 가능한 경우 높은 확대/축소 수준에서 45° 이미지를 지원합니다. 사용자가 이러한 이미지가 있는 위치를 확대하면, 이 지도 유형이 다음과 같은 방식으로 자동으로 뷰를 변경합니다.

  • 위성 또는 하이브리드 이미지가 현재 위치를 중심으로 45° 시야를 제공하는 이미지로 교체됩니다. 기본적으로 이러한 뷰는 북쪽을 향합니다. 사용자가 화면을 축소하면 기본 위성 또는 하이브리드 이미지가 다시 나타납니다.
  • 회전 컨트롤이 틸트와 회전 옵션의 조합을 제공합니다. rotateControltrue인 경우, 45° 이미지를 사용할 수 있으면 틸트 컨트롤이 나타납니다. 틸트 컨트롤을 사용하면 사용자가 이미지를 45°로 기울일 수 있습니다.
  • 이미지가 틸트되면 고리가 나타나고, 사용자가 뷰를 시계 방향으로 90° 회전할 수 있습니다.

지도 유형에서 화면을 축소하면 45° 이미지가 각 변경 사항을 되돌리고 원래의 지도 유형을 다시 설정합니다.

45° 이미지 활성화 및 비활성화

Map 객체에서 setTilt(0)를 호출하여 45° 이미지를 비활성화할 수 있습니다. 지원되는 지도 유형에서 45° 이미지를 활성화하려면 setTilt(45)를 호출합니다.

MapgetTilt() 메서드는 언제나 현재 지도에 표시되는 틸트를 반영합니다. 지도에 틸트를 설정하고 나중에 그 틸트를 제거하면(예: 지도 축소), 지도의 getTilt() 메서드가 0을 반환합니다.

다음 예시는 오리건 주 포틀랜드 도심의 45° 뷰를 표시합니다.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 36.964, lng: -122.015},
    zoom: 18,
    mapTypeId: 'satellite'
  });
  map.setTilt(45);
}
<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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 36.964, lng: -122.015},
    zoom: 18,
    mapTypeId: 'satellite'
  });
  map.setTilt(45);
}

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

45° 이미지 회전

실제로 45° 이미지는 각 기본 방향(동, 서, 남, 북)의 이미지 집합으로 구성됩니다. 지도에서 45° 이미지를 표시할 때, Map 객체에서 setHeading()을 호출하고 북쪽을 기준으로 도 단위로 표현된 숫자 값을 전달하여 이미지 방향을 기본 방향 중 하나로 바꿀 수 있습니다.

다음 예시는 항공지도를 보여줍니다. 버튼을 클릭하면 지도가 3초마다 자동으로 회전합니다.

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.518, lng: -122.672},
    zoom: 18,
    mapTypeId: 'satellite',
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var heading = map.getHeading() || 0;
  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}
<div id="floating-panel"><input type="button" value="Auto Rotate" onclick="autoRotate();"></div>
<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;
}
#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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.518, lng: -122.672},
    zoom: 18,
    mapTypeId: 'satellite',
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var heading = map.getHeading() || 0;
  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

예시 보기(aerial-rotation.html).

지도 유형 레지스트리 수정

지도의 mapTypeIdMapType과 고유한 값을 연결하는 데 사용되는 문자열 식별자입니다. 각 Map 객체는 MapTypeRegistry를 관리하고, 이 레지스트리에는 해당 지도에서 사용 가능한 MapType 컬렉션이 포함되어 있습니다. 이 레지스트리는 예를 들어, Map의 MapType 컨트롤에서 사용할 수 있는 지도 유형을 선택하는 데 사용됩니다.

지도 유형 레지스트리에서 직접 읽어오지 않습니다. 대신, 사용자 지정 지도 유형을 추가하고 선택한 문자열 식별자와 연결해서 레지스트리를 수정합니다. 기본 지도 유형은 수정하거나 변경할 수 없습니다. 그러나 지도의 연결된 mapTypeControlOptions의 외형을 변경하여 지도에서 제거할 수는 있습니다.

다음 코드는 지도의 mapTypeControlOptions에서 두 가지 지도 유형만 표시하도록 설정하고, 레지스트리를 수정하여 MapType 인터페이스의 실제 구현에 이 식별자와의 연결을 추가합니다. 참고: 이전 코드에서는 의도적으로 사용자 지정 지도 유형 생성에 대해 다루지 않았습니다. 지도 유형 생성에 대한 내용은 아래의 스타일이 지정된 지도 또는 사용자 지정 지도 유형을 참조하세요.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is simply an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: ['roadmap', MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

스타일 지정 지도

StyledMapType을 사용하면 표준 Google 기본 지도의 표현을 사용자 지정할 수 있으며, 이를 통해 도로, 공원, 건물 밀집 지역 등의 요소를 시각적으로 변경하여 기본 지도 유형에서 사용되는 스타일과 다른 스타일을 적용할 수 있습니다.

StyledMapType에 대한 자세한 내용은 스타일 지정 지도 가이드를 참조하세요.

사용자 지정 지도 유형

Google Maps JavaScript API는 사용자 지정 지도 유형의 표시와 관리를 지원하므로, 자신의 지도 이미지나 타일 오버레이를 구현할 수 있습니다.

Maps JavaScript API에는 가능한 여러 가지 지도 유형 구현이 존재합니다.

  • 이미지로 구성된 표준 타일 집합. 종합적으로 전체 제작 지도를 구성합니다. 이 타일 집합은 기본 지도 유형이라고도 합니다. 이 지도 유형은 기존 기본 지도 유형(roadmap, satellite, hybridterrain)과 같은 방식으로 작동합니다. 지도의 mapTypes 배열에 사용자 지정 지도 유형을 추가하고, Maps JavaScript API 내 UI가 사용자 지정 지도 유형을 표준 지도 유형으로 처리하게 할 수 있습니다(예: MapType 컨트롤에 포함).
  • 기존 기본 지도 유형 위에 표시되는 이미지 타일 오버레이. 일반적으로 이러한 지도 유형은 기존 지도 유형을 보강하여 추가 정보를 표시하는 데 사용되며, 대개 특정 위치 및/또는 확대/축소 수준으로 제한됩니다. 이 타일은 투명해서, 지형지물을 기존 지도에 추가할 수 있습니다.
  • 이미지가 아닌 지도 유형. 가장 기초적인 수준에서 지도 정보 표시를 조작할 수 있습니다.

이러한 각 옵션은 MapType 인터페이스를 구현하는 클래스를 생성하는 과정이 필요합니다. 또한, ImageMapType 클래스는 이미지 MapType의 생성을 단순화하는 몇 가지 내부 동작을 제공합니다.

MapType을 구현하는 클래스를 설명하기 전에, Google 지도가 좌표를 판별하고 지도에서 표시할 부분을 결정하는 방법을 이해하는 것이 중요합니다. 모든 기본 또는 오버레이 MapType에 대해 유사한 로직을 구현해야 합니다.

지도 좌표

Google Maps JavaScript API는 다음과 같은 몇 가지 좌표계를 사용합니다.

  • 전 세계에서 고유하게 한 지점을 참조하는 위도 및 경도 값. (Google은 World Geodetic System WGS84 표준을 사용합니다.)
  • 지도의 한 지점을 고유하게 참조하는 세계 좌표
  • 특정 확대/축소 수준에서 지도의 특정 타일을 참조하는 타일 좌표

세계 좌표

Google Maps JavaScript API가 세계의 한 위치를 지도(화면) 위의 위치로 변환할 때마다, 먼저 위도와 경도 값을 "세계" 좌표로 변환해야 합니다. 이 변환은 지도 프로젝션을 사용하여 수행합니다. Google 지도는 여기에 메르카토르 도법을 사용합니다. 또한, google.maps.Projection 인터페이스를 사용하여 자체적인 프로젝션을 정의할 수도 있습니다. (Maps JavaScript API의 인터페이스는 "서브클래스를 생성하는" 클래스는 아니며 단지 직접 정의하는 클래스의 사양입니다.)

픽셀 좌표를 계산하기 쉽도록(아래 참조), 확대/축소 수준 0의 지도는 기본 타일 크기의 단일 타일이라고 가정합니다. 그런 다음 확대/축소 수준 0의 픽셀 좌표에 대한 세계 좌표를 정의하고, 프로젝션을 사용하여 위도 및 경도를 이 기본 타일의 픽셀 위치로 변환합니다. 이 세계 좌표는 지도 프로젝션의 원점에서 특정 위치까지 측정한 부동 소수점 값입니다. 이 값은 부동 소수점이므로, 현재 표시되는 지도 이미지의 해상도보다 훨씬 더 정확할 수 있습니다. 즉, 세계 좌표는 현재 확대/축소 수준과 무관합니다.

Google 지도의 세계 좌표는 메르카토르 도법의 원점(지도에서 경도 180도, 위도 85도 가량의 북동쪽 모서리)에서부터 측정됩니다. 동쪽(오른쪽)으로 향하면 x가 증가하고 남쪽(아래)으로 향하면 y가 증가합니다. 기본 메르카토르 Google 지도 타일은 256 x 256 픽셀이므로 사용 가능한 세계 좌표 공간은 {0-256}, {0-256}입니다(아래 참조).

참고로 메르카토르 도법은 세로 너비는 유한하지만 가로 높이는 무한합니다. 우리는 메르카토르 도법을 이용하여 약 +/- 85도에서 기본 지도 이미지를 "잘라서" 표시되는 지도 형태가 사각형이 되게 했습니다. 이렇게 하면 타일 선택 로직이 쉬워지기 때문입니다. 가령 극점에서 매우 가까운 곳에 좌표를 그리면, 기본 지도의 사용 가능한 좌표 공간 바깥에 세계 좌표가 생성될 수 있습니다.

픽셀 좌표

세계 좌표는 주어진 프로젝션에서 절대 위치를 나타내지만, 이 세계 좌표를 픽셀 좌표로 변환해서 주어진 확대/축소 수준의 "픽셀" 오프셋을 알아내야 합니다. 이러한 픽셀 좌표는 다음 공식으로 계산됩니다.

pixelCoordinate = worldCoordinate * 2zoomLevel

위 방정식에서 확대/축소 수준이 증가할 때마다 xy 방향으로 두 배씩 커집니다. 그러므로 확대/축소 수준이 한 단계 높아지면 이전 수준보다 해상도가 4배 증가합니다. 예를 들어, 확대/축소 수준이 1이면 지도는 256x256 픽셀 타일 4개, 즉 512x512의 픽셀 공간으로 구성됩니다. 확대/축소 수준 19에서 지도의 xy 픽셀은 각각 0~256 * 219 값으로 참조될 수 있습니다.

세계 좌표는 지도의 타일 크기에 기반하므로,픽셀 좌표의 정수 부분을 보면 현재 확대/축소 수준에서 해당 장소의 정확한 픽셀을 알아낼 수 있습니다. 확대/축소 수준이 0일 경우, 픽셀 좌표는 세계 좌표와 같습니다.

이제 각 확대/축소 수준에서 지도에 위치를 정확히 나타내는 방법을 알게 되었습니다. Google Maps JavaScript API는 지도 중앙에 주어진 확대/축소 수준에서(LatLng로) 포함된 DOM 요소의 크기로 뷰포트를 생성하고, 이 경계 상자를 픽셀 좌표로 변환합니다. 그런 다음 API가 주어진 픽셀 경계 내에 있는 모든 지도 타일을 논리적으로 판별합니다. 이 지도 타일은 각각 타일 좌표를 사용하여 참조되며, 따라서 지도 이미지 표시를 상당히 단순화합니다.

타일 좌표

Google Maps JavaScript API는 가장 유용한 높은 확대/축소 수준에서 모든 지도 이미지를 로드할 수는 없습니다. 대신, Maps JavaScript API는 각 확대/축소 수준의 이미지를 지도 타일 집합으로 분할합니다. 이 타일 집합은 애플리케이션이 이해하는 순서대로 논리적으로 배열됩니다. 지도에서 새로운 위치나 새로운 확대/축소 수준으로 스크롤하면, Maps JavaScript API가 픽셀 좌표를 사용하여 어느 타일이 필요한지 알아내고 해당 값을 검색할 타일 집합으로 변환합니다. 이 타일 좌표는 구성표를 사용하여 할당되며, 주어진 지점에서 어느 타일이 이미지를 포함하는지 논리적으로 판별하기 쉬워집니다.

Google 지도의 타일은 픽셀과 동일한 원점에서부터 번호가 매겨집니다. Google이 구현한 메르카토르 도법의 경우, 원점 타일은 항상 지도의 북서쪽 모서리에 있으며, x값은 서쪽에서 동쪽으로 갈수록 증가하고 y값은 북쪽에서 남쪽으로 갈수록 증가합니다. 타일은 해당 원점에서부터 x,y 좌표를 사용하여 인덱싱됩니다. 예를 들어, 확대/축소 수준 2에서 지구를 16개 타일로 나누었을 때 각 타일은 고유한 x,y 쌍으로 참조될 수 있습니다.

타일 크기로 픽셀 좌표를 나누고 그 결과값에서 정수 부분을 취하면 현재 확대/축소 수준의 타일 좌표를 부수적으로 얻게 됩니다.

다음 예시는 일리노이 주 시카고의 좌표(LatLng 값, 세계 좌표, 픽셀 좌표, 타일 좌표)를 다양한 확대/축소 수준에서 나타낸 것입니다.

예시 보기(map-coordinates.html)

MapType 인터페이스

사용자 지정 지도 유형은 MapType 인터페이스를 구현해야 합니다. 이 인터페이스는 API가 현재 뷰포트와 확대/축소 수준에서 지도 타일을 표시해야 한다고 결정했을 때 지도 유형 요청을 시작하게 해주는 특정 속성과 메서드를 지정합니다. 개발자는 이 요청을 처리하여 어떤 타일을 로드할지 결정합니다.

참고: 직접 클래스를 생성해서 이 인터페이스를 구현하거나, 호환 이미지가 있다면 이미 이 인터페이스를 구현한 ImageMapType 클래스를 사용할 수 있습니다.)

MapType 인터페이스를 구현하는 클래스는 다음 속성을 정의하고 채워야 합니다.

  • tileSize(필수)는 타일(google.maps.Size 유형)의 크기를 지정합니다. 크기는 사각형이어야 하지만, 정사각형일 필요는 없습니다.
  • maxZoom(필수)은 이 지도 유형의 타일을 표시할 최대 확대/축소 수준을 지정합니다.
  • minZoom(선택향목)은 이 지도 유형의 타일을 표시할 최소 확대/축소 수준을 지정합니다. 기본적으로 이 값은 0이고, 이는 최소 확대/축소 수준이 없다는 것을 나타냅니다.
  • name(선택 항목)은 이 지도 유형의 이름을 지정합니다. 이 속성은 MapType 컨트롤에서 이 지도 유형을 선택 가능하게 하고 싶을 경우에만 필요합니다. (아래의 MapType 컨트롤 추가를 참조하세요.)
  • alt(선택 항목)는 이 지도 유형의 대체 텍스트를 지정하며, 호버 텍스트로 표시됩니다. 이 속성은 MapType 컨트롤에서 이 지도 유형을 선택 가능하게 하고 싶을 경우에만 필요합니다. (아래의 MapType 컨트롤 추가를 참조하세요.)

또한, MapType 인터페이스를 구현하는 클래스는 다음 메서드를 구현해야 합니다.

  • getTile()(필수)은 API가 지도에 주어진 뷰포트에 대해 새로운 타일을 표시해야 한다고 결정할 때마다 호출됩니다. getTile() 메서드는 다음 서명이 있어야 합니다.

    getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

    API는 MapTypetileSize, minZoom, maxZoom 속성과 지도의 현재 뷰포트 및 확대/축소 수준을 기반으로 getTile()을 호출해야 하는지 판별합니다. 이 메서드의 핸들러는 전달된 좌표, 확대/축소 수준, 타일 이미지를 첨부할 DOM 요소를 고려하여 HTML 요소를 반환해야 합니다.

  • releaseTile()(선택 항목)은 API가 타일이 뷰에서 벗어나므로 지도에서 제거해야 한다고 결정할 때마다 호출됩니다. 이 메서드는 다음 서명이 있어야 합니다.

    releaseTile(tile:Node)

    일반적으로 지도 타일에 첨부한 요소를 제거할 때는 지도에 추가했던 곳에서 이를 처리해야 합니다. 예를 들어, 이벤트 리스너를 지도 타일 오버레이에 첨부했다면 여기서 제거해야 합니다.

getTile() 메서드는 주어진 뷰포트 내에서 로드할 타일을 결정하는 메인 컨트롤러 역할을 합니다.

기본 지도 유형

이 방식으로 생성하는 지도 유형은 독립형이거나 오버레이로 다른 지도 유형과 결합될 수 있습니다. 독립형 지도 유형은 기본 지도 유형이라고 합니다. API가 이러한 사용자 지정 MapType을 다른 기존 기본 지도 유형(ROADMAP, TERRAIN 등)처럼 취급하기를 바랄 수도 있습니다. 그렇게 하려면 사용자 지정 MapTypeMapmapTypes 속성에 추가합니다. 이 속성은 MapTypeRegistry 유형입니다.

다음 코드는 기본 MapType을 생성하여, 지도의 타일 좌표를 표시하고 그 타일의 외곽선을 그립니다.

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.name = 'Tile #s';
CoordMapType.prototype.alt = 'Tile Coordinate Map Type';

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  div.style.backgroundColor = '#E5E3DF';
  return div;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650},
    streetViewControl: false,
    mapTypeId: 'coordinate',
    mapTypeControlOptions: {
      mapTypeIds: ['coordinate', 'roadmap'],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  });

  map.addListener('maptypeid_changed', function() {
    var showStreetViewControl = map.getMapTypeId() !== 'coordinate';
    map.setOptions({
      streetViewControl: showStreetViewControl
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set('coordinate',
                   new CoordMapType(new google.maps.Size(256, 256)));
}
<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 demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.name = 'Tile #s';
CoordMapType.prototype.alt = 'Tile Coordinate Map Type';

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  div.style.backgroundColor = '#E5E3DF';
  return div;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650},
    streetViewControl: false,
    mapTypeId: 'coordinate',
    mapTypeControlOptions: {
      mapTypeIds: ['coordinate', 'roadmap'],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  });

  map.addListener('maptypeid_changed', function() {
    var showStreetViewControl = map.getMapTypeId() !== 'coordinate';
    map.setOptions({
      streetViewControl: showStreetViewControl
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set('coordinate',
                   new CoordMapType(new google.maps.Size(256, 256)));
}

예시 보기(maptype-base.html).

오버레이 지도 유형

어떤 지도 유형은 기존 지도 유형 위에서 작동하도록 설계됩니다. 그러한 지도 유형은 관심 지점을 나타내거나 사용자에게 추가 데이터를 보여주는 투명 계층을 가질 수 있습니다.

이 경우, 이 지도 유형은 별도 엔터티로 취급해서는 안 됩니다. 대신, MapoverlayMapTypes 속성을 직접 사용하여 이 지도 유형을 기존 MapType에 추가할 수 있습니다. 이 속성에는 MapTypeMVCArray가 포함됩니다. 모든 지도 유형(기본 및 오버레이)은 mapPane 계층에서 렌더링됩니다. 오버레이 지도 유형은 Map.overlayMapTypes 배열에 나타난 순서대로 자신이 첨부된 기본 지도 위에 표시됩니다.

다음 예시는 이전 예시와 동일하지만, ROADMAP 지도 유형 위에 타일 오버레이 MapType을 생성했다는 차이가 있습니다.

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

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

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}
<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 demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

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

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}

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

이미지 지도 유형

MapType이 기본 지도 유형 역할을 하도록 구현하는 것은 시간이 오래 걸리고 노력이 많이 드는 작업입니다. API는 가장 흔한 지도 유형을 위한 MapType 인터페이스를 구현하는 특수 클래스를 제공합니다. 가장 흔한 지도 유형이란, 단일 이미지 파일로 이루어진 타일들로 구성된 지도 유형을 말합니다.

ImageMapType 클래스는 다음 필수 속성을 정의하는 ImageMapTypeOptions 객체를 사용하여 생성합니다.

  • tileSize(필수)는 타일(google.maps.Size 유형)의 크기를 지정합니다. 크기는 사각형이어야 하지만, 정사각형일 필요는 없습니다.
  • getTileUrl(필수)은 대개 인라인 함수 리터럴로 제공되고, 입력된 세계 좌표와 확대/축소 수준에 따라 적절한 이미지 타일 선택을 처리하는 함수를 지정합니다.

다음 코드는 Google의 달표면 질감 타일을 사용하여 기본적인 ImageMapType을 구현합니다. 이 예시는 정규화 함수를 사용하여 타일이 지도의 x축을 따라 반복되지만, y축에서는 반복되지 않게 합니다.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  });

  var moonMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
          return null;
        }
        var bound = Math.pow(2, zoom);
        return '//mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
            '/' + zoom + '/' + normalizedCoord.x + '/' +
            (bound - normalizedCoord.y - 1) + '.jpg';
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    radius: 1738000,
    name: 'Moon'
  });

  map.mapTypes.set('moon', moonMapType);
  map.setMapTypeId('moon');
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  var tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
  }

  return {x: x, y: y};
}
<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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  });

  var moonMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
          return null;
        }
        var bound = Math.pow(2, zoom);
        return '//mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
            '/' + zoom + '/' + normalizedCoord.x + '/' +
            (bound - normalizedCoord.y - 1) + '.jpg';
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    radius: 1738000,
    name: 'Moon'
  });

  map.mapTypes.set('moon', moonMapType);
  map.setMapTypeId('moon');
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  var tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
  }

  return {x: x, y: y};
}

예시 보기(maptype-image.html).

프로젝션

지구는 (대략적으로) 3D 구체이지만, 지도는 평평한 2D 표면입니다. Google Maps JavaScript API에서 보는 지도는 다른 평평한 지구 지도와 마찬가지로 지구라는 구체를 평면에 프로젝션한 것입니다. 간단히 말하면, 프로젝션은 위도/경도 값을 프로젝션 지도의 좌표로 매핑한 것이라고 정의할 수 있습니다.

Maps JavaScript API의 프로젝션은 Projection 인터페이스를 구현해야 합니다. Projection 구현은 단일 좌표계 간의 매핑뿐만 아니라 양방향 매핑도 제공해야 합니다. 즉, 지구 좌표(LatLng)를 Projection세계 좌표계로 변환하거나 그 반대로 변환하는 방법을 정의해야 합니다. Google 지도는 메르카토르 도법을 사용하여 지리적 데이터로부터 지도를 생성하고, 지도 위의 이벤트를 지리적 좌표로 변환합니다. Map(또는 표준 기본 MapType)에서 getProjection()을 호출하면 이 프로젝션을 얻을 수 있습니다. 대부분의 경우, 이 표준 Projection으로 충분하지만 사용자 지정 프로젝션을 정의하고 사용할 수도 있습니다.

프로젝션 구현

사용자 지정 프로젝션을 구현할 때는 몇 가지를 정의해야 합니다.

  • 위도와 경도 좌표를 데카르트 평면으로 매핑하거나 그 반대로 매핑하는 공식. (Projection 인터페이스는 직선 좌표 변환만 지원합니다.)
  • 기본 타일 크기. 모든 타일은 사각형이어야 합니다.
  • 확대/축소 수준이 0으로 설정된 상태에서 기본 타일을 사용하는 지도의 "세계 크기". 참고로 확대/축소 수준 0에서 타일 1개로 구성된 지도의 경우, 세계 크기와 기본 타일 크기는 동일합니다.

프로젝션에서 좌표 변환

각 프로젝션은 두 좌표계를 서로 변환하는 두 가지 메서드를 제공합니다. 이를 이용하면 지리적 좌표와 세계 좌표를 서로 변환할 수 있습니다.

  • Projection.fromLatLngToPoint() 메서드는 LatLng 값을 세계 좌표로 변환합니다. 이 메서드는 지도에서 오버레이 위치 지정(및 지도 자체의 위치 지정)에 사용됩니다.
  • Projection.fromPointToLatLng() 메서드는 세계 좌표를 LatLng 값으로 변환합니다. 이 메서드는 지도 위의 클릭과 같은 이벤트를 지리적 좌표로 변환하는 데 사용됩니다.

Google 지도는 프로젝션을 직선으로 가정합니다.

일반적으로 프로젝션은 세계 지도를 생성하거나 지역 지도를 생성하는 두 가지 경우에 사용할 수 있습니다. 세계 지도를 생성할 때는 프로젝션이 모든 경도에서 직선이고 정상이어야 합니다. 일부 프로젝션(특히 원뿔 프로젝션)은 "국지적으로 정상"(예: 북향)일 수 있지만 정북에서는 벗어나 있습니다. 예를 들어, 일부 기준 경도에 비해 지도가 더 멀리 배치되어 있습니다. 이러한 프로젝션은 국지적으로 사용할 수 있지만, 부정확하므로 기준 경도에서 멀리 이탈할수록 변환 오류도 눈에 띄게 커집니다.

프로젝션에서 지도 타일 선택

프로젝션은 위치나 오버레이의 자리를 판별할 때 뿐만 아니라 지도 타일 자체의 위치를 지정하는 데도 유용합니다. Google Maps JavaScript API는 MapType 인터페이스를 사용하여 기본 지도를 렌더링합니다. 지도의 프로젝션을 식별하기 위한 projection 속성과 타일 좌표 값을 기반으로 지도 타일을 검색하기 위한 getTile() 메서드를 모두 선언해야 합니다. 타일 좌표는 지도의 기본 타일 크기(사각형이어야 함)와 "세계 크기"를 기반으로 하며, 확대/축소 수준 0에서 지도 세계의 픽셀 크기입니다. (확대/축소 수준 0에서 타일 1개로 구성된 지도의 경우, 타일 크기와 세계 크기는 동일합니다.)

MapTypetileSize 속성에서 기본 타일 크기를 정의합니다. 프로젝션의 fromLatLngToPoint()fromPointToLatLng() 메서드 내에서 세계 크기를 암시적으로 정의합니다.

이미지 선택은 이러한 전달된 값에 따라 달라지므로, map_zoom_tileX_tileY.png 등의 전달된 값에 따라 프로그래밍 방식으로 선택할 수 있는 이미지 이름을 지정하면 유용합니다.

다음 예시는 Gall-Peters 프로젝션을 사용하여 ImageMapType을 정의합니다.

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection

function initMap() {
  // Create a map. Use the Gall-Peters map type.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 0,
    center: {lat: 0, lng: 0},
    mapTypeControl: false
  });

  initGallPeters();
  map.mapTypes.set('gallPeters', gallPetersMapType);
  map.setMapTypeId('gallPeters');

  // Show the lat and lng under the mouse cursor.
  var coordsDiv = document.getElementById('coords');
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener('mousemove', function(event) {
    coordsDiv.textContent =
        'lat: ' + Math.round(event.latLng.lat()) + ', ' +
        'lng: ' + Math.round(event.latLng.lng());
  });

  // Add some markers to the map.
  map.data.setStyle(function(feature) {
    return {
      title: feature.getProperty('name'),
      optimized: false
    };
  });
  map.data.addGeoJson(cities);
}

var gallPetersMapType;
function initGallPeters() {
  var GALL_PETERS_RANGE_X = 800;
  var GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var scale = 1 << zoom;

      // Wrap tiles horizontally.
      var x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      var y = coord.y;
      if (y < 0 || y >= scale) return null;

      return 'https://developers.google.com/maps/documentation/' +
             'javascript/examples/full/images/gall-peters_' + zoom +
             '_' + x + '_' + y + '.png';
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    isPng: true,
    minZoom: 0,
    maxZoom: 1,
    name: 'Gall-Peters'
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function(latLng) {
      var latRadians = latLng.lat() * Math.PI / 180;
      return new google.maps.Point(
          GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
          GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)));
    },
    fromPointToLatLng: function(point, noWrap) {
      var x = point.x / GALL_PETERS_RANGE_X;
      var y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
          Math.asin(1 - 2 * y) * 180 / Math.PI,
          -180 + 360 * x,
          noWrap);
    }
  };
}

// GeoJSON, describing the locations and names of some cities.
var cities = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-87.650, 41.850]},
    properties: {name: 'Chicago'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-149.900, 61.218]},
    properties: {name: 'Anchorage'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-99.127, 19.427]},
    properties: {name: 'Mexico City'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-0.126, 51.500]},
    properties: {name: 'London'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [28.045, -26.201]},
    properties: {name: 'Johannesburg'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [15.322, -4.325]},
    properties: {name: 'Kinshasa'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [151.207, -33.867]},
    properties: {name: 'Sydney'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [0, 0]},
    properties: {name: '0°N 0°E'}
  }]
};
<div id="map"></div>
<div id="coords"></div>
#coords {
  background-color: black;
  color: white;
  padding: 5px;
}
<!-- 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 defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection

function initMap() {
  // Create a map. Use the Gall-Peters map type.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 0,
    center: {lat: 0, lng: 0},
    mapTypeControl: false
  });

  initGallPeters();
  map.mapTypes.set('gallPeters', gallPetersMapType);
  map.setMapTypeId('gallPeters');

  // Show the lat and lng under the mouse cursor.
  var coordsDiv = document.getElementById('coords');
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener('mousemove', function(event) {
    coordsDiv.textContent =
        'lat: ' + Math.round(event.latLng.lat()) + ', ' +
        'lng: ' + Math.round(event.latLng.lng());
  });

  // Add some markers to the map.
  map.data.setStyle(function(feature) {
    return {
      title: feature.getProperty('name'),
      optimized: false
    };
  });
  map.data.addGeoJson(cities);
}

var gallPetersMapType;
function initGallPeters() {
  var GALL_PETERS_RANGE_X = 800;
  var GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var scale = 1 << zoom;

      // Wrap tiles horizontally.
      var x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      var y = coord.y;
      if (y < 0 || y >= scale) return null;

      return 'https://developers.google.com/maps/documentation/' +
             'javascript/examples/full/images/gall-peters_' + zoom +
             '_' + x + '_' + y + '.png';
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    isPng: true,
    minZoom: 0,
    maxZoom: 1,
    name: 'Gall-Peters'
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function(latLng) {
      var latRadians = latLng.lat() * Math.PI / 180;
      return new google.maps.Point(
          GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
          GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)));
    },
    fromPointToLatLng: function(point, noWrap) {
      var x = point.x / GALL_PETERS_RANGE_X;
      var y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
          Math.asin(1 - 2 * y) * 180 / Math.PI,
          -180 + 360 * x,
          noWrap);
    }
  };
}

// GeoJSON, describing the locations and names of some cities.
var cities = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-87.650, 41.850]},
    properties: {name: 'Chicago'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-149.900, 61.218]},
    properties: {name: 'Anchorage'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-99.127, 19.427]},
    properties: {name: 'Mexico City'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-0.126, 51.500]},
    properties: {name: 'London'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [28.045, -26.201]},
    properties: {name: 'Johannesburg'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [15.322, -4.325]},
    properties: {name: 'Kinshasa'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [151.207, -33.867]},
    properties: {name: 'Sydney'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [0, 0]},
    properties: {name: '0°N 0°E'}
  }]
};

예시 보기(map-projection-simple.html).

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

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