공지사항: 새로운 기본 지도 스타일이 곧 Google Maps Platform에 제공될 예정입니다. 이 지도 스타일 지정 업데이트에는 새로운 기본 색상 팔레트, 현대화된 핀, 지도 환경 및 사용성 개선사항이 포함됩니다. 모든 지도 스타일이 2025년 3월에 자동으로 업데이트됩니다. 사용 가능 여부 및 더 일찍 선택하는 방법에 대한 자세한 내용은 Google Maps Platform용 새로운 지도 스타일을 참고하세요.
2021년 5월 26일부터 Maps JavaScript API v2를 더 이상 사용할 수 없습니다. 따라서 사이트의 v2 지도 작동이 중지되고 JavaScript 오류가 반환됩니다. 사이트에서 지도를 계속 사용하려면 Maps JavaScript API v3으로 이전하세요. 이 가이드를 통해 이 과정을 진행할 수 있습니다.
개요
모든 애플리케이션의 이전 프로세스는 약간 다르지만 모든 프로젝트에 공통적인 몇 가지 단계가 있습니다.
새 키를 받습니다. 이제 Maps JavaScript API는 Google Cloud 콘솔을 사용하여 키를 관리합니다. 아직 v2 키를 사용하고 있다면 이전을 시작하기 전에 새 API 키를 가져와야 합니다.
API 부트스트랩을 업데이트합니다. 대부분의 애플리케이션은 다음 코드로 Maps JavaScript API v3을 로드합니다.
코드를 업데이트합니다. 필요한 변경사항의 양은 애플리케이션에 따라 크게 달라집니다. 일반적인 변경사항은 다음과 같습니다.
항상 google.maps 네임스페이스를 참조합니다. v3에서는 모든 Maps JavaScript API 코드가 전역 네임스페이스 대신 google.maps.* 네임스페이스에 저장됩니다. 이 과정에서 대부분의 객체 이름도 변경되었습니다. 예를 들어 이제 GMap2 대신 google.maps.Map를 로드합니다.
사용하지 않는 메서드에 대한 참조를 삭제합니다.GDownloadURL 및 GLog와 같은 여러 범용 유틸리티 메서드가 삭제되었습니다.
이 기능을 서드 파티 유틸리티 라이브러리로 대체하거나 코드에서 이러한 참조를 삭제합니다.
(선택사항) 코드에 라이브러리를 추가합니다. 각 앱에서 사용될 API 부분만 로드하면 되도록 많은 기능이 유틸리티 라이브러리로 외부화되었습니다.
(선택사항) v3 externs를 사용하도록 프로젝트를 구성합니다.
v3 extern은 Closure 컴파일러로 코드의 유효성을 검사하거나 IDE에서 자동 완성을 트리거하는 데 사용할 수 있습니다.
고급 컴파일 및 외부 참조에 대해 자세히 알아보세요.
테스트하고 반복하세요. 이 시점에서 아직 할 일이 남아 있지만 좋은 소식은 새 v3 지도 애플리케이션을 만드는 데 한 걸음 더 다가가게 되었다는 것입니다.
Maps JavaScript API V3의 변경사항
이전을 계획하기 전에 Maps JavaScript API v2와 Maps JavaScript API v3의 차이점을 이해하는 데 시간을 할애해야 합니다. 최신 버전의 Maps JavaScript API는 최신 JavaScript 프로그래밍 기법, 라이브러리 사용 증가, 간소화된 API에 중점을 두고 처음부터 다시 작성되었습니다.
API에 많은 새로운 기능이 추가되었으며 익숙한 기능 중 일부가 변경되거나 삭제되었습니다. 이 섹션에서는 두 버전 간의 주요 차이점을 설명합니다.
v3 API 변경 사항:
핵심 라이브러리가 간소화되었습니다. 많은 보조 함수가 라이브러리로 이동되어 Core API의 로드 및 파싱 시간이 줄어들고 모든 기기에서 지도가 빠르게 로드됩니다.
다각형 렌더링, 마커 배치와 같은 여러 기능의 성능이 개선되었습니다.
모바일 프록시 및 기업 방화벽에서 사용하는 공유 주소를 더 잘 수용하기 위한 클라이언트 측 사용량 한도에 대한 새로운 접근 방식입니다.
여러 최신 브라우저 및 모바일 브라우저에 대한 지원을 추가했습니다. Internet Explorer 6 지원이 삭제되었습니다.
Maps JavaScript API v3은 v2의 새로운 키 시스템을 사용합니다. 애플리케이션에서 이미 v3 키를 사용하고 있을 수 있으며, 이 경우 변경할 필요가 없습니다. 확인하려면 Maps JavaScript API를 로드하는 URL에서 key 매개변수를 확인하세요. 키 값이 'ABQIAA'로 시작하면 v2 키를 사용하고 있는 것입니다. v2 키가 있는 경우 마이그레이션의 일환으로 v3 키로 업그레이드해야 합니다. 업그레이드하면 다음과 같은 이점이 있습니다.
업무용 Google 지도 API 고객인 경우 key 매개변수 대신 client 매개변수와 함께 클라이언트 ID를 사용하고 있을 수 있습니다. 클라이언트 ID는 Maps JavaScript API v3에서 계속 지원되며 키 업그레이드 프로세스를 거칠 필요가 없습니다.
API 로드
코드에서 먼저 수정해야 할 사항은 API를 로드하는 방법입니다. v2에서는 http://maps.google.com/maps 요청을 통해 Maps JavaScript API를 로드합니다. Maps JavaScript API v3를 로드하는 경우 다음과 같이 변경해야 합니다.
//maps.googleapis.com/maps/api/js에서 API 로드
file 매개변수를 삭제합니다.
새 v3 키로 key 매개변수를 업데이트합니다. 업무용 Google 지도 API 고객은 client 매개변수를 사용해야 합니다.
Maps JavaScript API v3에서 가장 눈에 띄는 변경사항은 google.maps 네임스페이스의 도입일 것입니다. v2 API는 기본적으로 모든 객체를 전역 네임스페이스에 배치하므로 이름 충돌이 발생할 수 있습니다. v3 내에서 모든 객체는 google.maps 네임스페이스 내에 있습니다.
애플리케이션을 v3로 이전할 때는 새 네임스페이스를 활용하도록 코드를 변경해야 합니다. 안타깝게도 'G'를 검색하여 'google.maps'로 대체해도 완전히 작동하지는 않습니다. 하지만 코드를 검토할 때 적용할 만한 좋은 경험칙입니다. 다음은 v2와 v3의 상응하는 클래스의 몇 가지 예입니다.
v2
v3
GMap2
google.maps.Map
GLatLng
google.maps.LatLng
GInfoWindow
google.maps.InfoWindow
GMapOptions
google.map.MapOptions
G_API_VERSION
google.maps.version
GPolyStyleOptions
google.maps.PolygonOptions or
google.maps.PolylineOptions
사용하지 않는 코드 제거
Maps JavaScript API v3에는 v2의 대부분의 기능에 상응하는 기능이 있습니다. 하지만 더 이상 지원되지 않는 클래스도 있습니다. 이전의 일환으로 이러한 클래스를 서드 파티 유틸리티 라이브러리로 대체하거나 코드에서 이러한 참조를 삭제해야 합니다. Closure 또는 jQuery와 같이 유사한 기능을 제공하는 우수한 JavaScript 라이브러리가 많이 있습니다.
보시다시피 두 애플리케이션에는 몇 가지 차이점이 있습니다. 눈에 띄는 변경 사항은 다음과 같습니다.
API를 로드하는 주소가 변경되었습니다.
GBrowserIsCompatible() 및 GUnload() 메서드는 v3에서 더 이상 필요하지 않으며 API에서 삭제되었습니다.
GMap2 객체가 API의 중앙 객체로 google.maps.Map로 대체됩니다.
속성이 옵션 클래스를 통해 로드됩니다. 위 예에서는 삽입된 MapOptions 객체를 통해 지도 로드에 필요한 세 가지 속성(center, zoom, mapTypeId)을 설정했습니다.
v3에서는 기본 UI가 기본값입니다. MapOptions 객체에서 disableDefaultUI 속성을 true로 설정하여 사용 중지할 수 있습니다.
요약
이제 Maps JavaScript API의 v2에서 v3로 이전하는 데 관련된 몇 가지 주요 사항을 살펴봤습니다.
알아야 할 정보가 더 있지만 이는 애플리케이션에 따라 다릅니다. 다음 섹션에는 발생할 수 있는 특정 케이스에 대한 이전 안내가 포함되어 있습니다. 또한 업그레이드 프로세스 중에 유용한 리소스도 몇 가지 있습니다.
Maps JavaScript API v3 개발자 문서는 API와 작동 방식에 대해 자세히 알아볼 수 있는 최고의 리소스입니다.
Maps JavaScript API v3 참조를 통해 v3 API의 새로운 클래스와 메서드에 관해 자세히 알아볼 수 있습니다.
Stack Overflow 커뮤니티는 코드 관련 질문을 할 수 있는 좋은 장소입니다. 사이트에서 Maps JavaScript API와 관련된 질문과 답변에는 'google-maps' 또는 'google-maps-api-3' 태그가 사용됩니다.
이 도움말과 관련하여 문제가 있거나 궁금한 점이 있으면 이 페이지 상단의 의견 보내기 링크를 사용하세요.
상세 참조
이 섹션에서는 Maps JavaScript API의 v2 및 v3에서 가장 많이 사용되는 기능을 자세히 비교합니다. 참조의 각 섹션은 개별적으로 읽을 수 있도록 설계되었습니다. 이 참조를 전체적으로 읽지 않는 것이 좋습니다. 대신 이 자료는 경우에 따라 이전을 돕는 데 사용하세요.
Maps JavaScript API v3의 이벤트 모델은 v2에서 사용된 모델과 유사하지만 내부적으로 많은 부분이 변경되었습니다.
MVC 지원의 새로운 이벤트
v3 API는 MVC 상태 변화를 반영하여 새로운 이벤트 유형을 추가합니다. 이제 두 가지 유형의 이벤트가 있습니다.
사용자 이벤트 (예: '클릭' 마우스 이벤트)는 DOM에서 Maps JavaScript API로 전파됩니다. 이러한 이벤트는 표준 DOM 이벤트와 별개이며 서로 구분됩니다.
MVC 상태 변경 알림에는 Maps API 객체의 변경사항이 반영되며 property_changed 규칙을 사용하여 이름이 지정됩니다.
각 Maps API 객체는 다양한 이름이 지정된 이벤트를 내보냅니다. 특정 이벤트에 관심이 있는 애플리케이션은 해당 이벤트에 대한 이벤트 리스너를 등록하고 이벤트가 수신되면 코드를 실행해야 합니다. 이 이벤트 기반 메커니즘은 네임스페이스가 GEvent에서 google.maps.event로 변경된 점을 제외하고 Maps JavaScript API v2와 v3에서 동일합니다.
GEvent.addListener(map,'click',function(){alert('You clicked the map.');});
google.maps.event.addListener(map,'click',function(){alert('You clicked the map.');});
이벤트 리스너 삭제
성능상의 이유로 이벤트 리스너가 더 이상 필요하지 않으면 삭제하는 것이 가장 좋습니다. 이벤트 리스너를 삭제하는 방법은 v2와 v3에서 동일합니다.
이벤트 리스너를 삭제하려면 이 객체를 removeListener() 메서드 (v2의 GEvent.removeListener() 또는 v3의 google.maps.event.removeListener())에 전달하여 이벤트 리스너를 삭제합니다.
DOM 이벤트 수신 대기
DOM (문서 객체 모델) 이벤트를 캡처하고 이에 응답하려면 v3에서 v2의 GEvent.addDomListener() 메서드와 동일한 google.maps.event.addDomListener() 정적 메서드를 제공합니다.
이벤트에서 전달된 인수 사용
UI 이벤트는 이벤트 리스너에서 액세스할 수 있는 이벤트 인수를 전달하는 경우가 많습니다. v3의 대부분의 이벤트 인수가 API의 객체에 대해 더 일관되도록 단순화되었습니다. 자세한 내용은 v3 참조를 참고하세요.
v3 이벤트 리스너에는 overlay 인수가 없습니다. v3 지도에 click 이벤트를 등록하면 사용자가 기본 지도를 클릭할 때만 콜백이 발생합니다. 클릭에 반응해야 하는 경우 클릭 가능한 오버레이에 추가 콜백을 등록할 수 있습니다.
// Passes an overlay argument when clicking on a mapvarmap=newGMap2(document.getElementById('map'));map.setCenter(newGLatLng(-25.363882,131.044922),4);map.setUIToDefault();GEvent.addListener(map,'click',function(overlay,latlng){if(latlng){varmarker=newGMarker(latlng);map.addOverlay(marker);}});
// Passes only an event argumentvarmyOptions={center:newgoogle.maps.LatLng(-25.363882,131.044922),zoom:4,mapTypeId:google.maps.MapTypeId.ROADMAP};varmap=newgoogle.maps.Map(document.getElementById('map'),myOptions);google.maps.event.addListener(map,'click',function(event){varmarker=newgoogle.maps.Marker({position:event.latLng,map:map});});
컨트롤
Maps JavaScript API는 사용자가 지도와 상호작용할 수 있는 UI 컨트롤을 표시합니다. API를 사용하여 이러한 컨트롤이 표시되는 방식을 맞춤설정할 수 있습니다.
컨트롤 유형 변화
v3 API를 통해 control 유형에 몇 가지 변경사항이 도입되었습니다.
v3 API는 지형 지도를 비롯한 추가 지도 유형과 맞춤 지도 유형을 추가하는 기능을 지원합니다.
v2 계층적 제어인 GHierarchicalMapTypeControl를 더 이상 사용할 수 없습니다.
google.maps.MapTypeControlStyle.HORIZONTAL_BAR 컨트롤을 사용하여 유사한 효과를 얻을 수 있습니다.
v2에서 GMapTypeControl로 제공되는 가로 레이아웃은 v3에서 사용할 수 없습니다.
지도에 컨트롤 추가
Maps JavaScript API v2를 사용하면 지도 객체의 addControl() 메서드를 통해 지도에 컨트롤을 추가할 수 있습니다. v3에서는 컨트롤에 직접 액세스하거나 수정하는 대신 연결된 MapOptions 객체를 수정합니다. 다음 샘플은 지도에서 다음 컨트롤을 추가하도록 맞춤설정하는 방법을 보여줍니다.
v3에서는 컨트롤의 위치에 상당히 많은 변화가 있었습니다. v2에서 addControl() 메서드는 지도의 모서리에 대한 상대 컨트롤 위치를 지정할 수 있는 선택적 두 번째 매개변수를 사용합니다.
v3에서는 컨트롤 옵션의 position 속성을 통해 컨트롤의 위치를 설정합니다. 이러한 컨트롤의 위치는 절대적이지 않습니다. 대신 API는 지정된 제약 조건 (예: 지도 크기) 내에서 기존 지도 요소 주변에 '흐르게' 배치하여 컨트롤을 지능적으로 배치합니다.
이를 통해 기본 컨트롤이 개발자의 컨트롤과 호환됩니다.
자세한 내용은 v3에서 위치 지정 제어를 참고하세요.
다음 코드는 위 샘플에서 컨트롤 위치를 다시 지정합니다.
varmap=newGMap2(document.getElementById('map'));map.setCenter(newGLatLng(-25.363882,131.044922),4);// Add map type controlmap.addControl(newGMapTypeControl(),newGControlPosition(G_ANCHOR_TOP_LEFT,newGSize(10,10)));// Add scalemap.addControl(newGScaleControl(),newGControlPosition(G_ANCHOR_BOTTOM_RIGHT,newGSize(20,20)));
varmyOptions={center:newgoogle.maps.LatLng(-25.363882,131.044922),zoom:4,mapTypeId:google.maps.MapTypeId.ROADMAP,// Add map type controlmapTypeControl:true,mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR,position:google.maps.ControlPosition.TOP_LEFT},// Add scalescaleControl:true,scaleControlOptions:{position:google.maps.ControlPosition.BOTTOM_RIGHT}};varmap=newgoogle.maps.Map(document.getElementById('map'),myOptions);
맞춤 컨트롤
Maps JavaScript API를 사용하면 맞춤 탐색 컨트롤을 만들 수 있습니다.
v2 API로 컨트롤을 맞춤설정하려면 GControl 클래스의 서브클래스를 만들고 initialize() 및 getDefaultPosition() 메서드의 핸들러를 정의합니다.
v3에는 GControl 클래스와 동등한 클래스가 없습니다. 대신 컨트롤은 DOM 요소로 표시됩니다. v3 API를 사용하여 맞춤 컨트롤을 추가하려면 생성자에서 컨트롤의 DOM 구조를 Node의 하위 요소 (예: <div> 요소)로 만들고 이벤트 리스너를 추가하여 모든 DOM 이벤트를 처리합니다. Node를 지도의 controls[position] 배열에 푸시하여 지도에 맞춤 컨트롤의 인스턴스를 추가합니다.
위에 언급된 인터페이스 요구사항을 준수하는 HomeControl 클래스 구현 (자세한 내용은 맞춤 컨트롤 문서 참고)을 고려할 때 다음 코드 샘플은 지도에 맞춤 컨트롤을 추가하는 방법을 보여줍니다.
오버레이는 지도에 '추가'하여 점, 선, 영역 또는 객체의 모음을 지정하는 객체를 반영합니다.
오버레이 추가 및 제거
오버레이로 표현되는 객체 유형은 v2와 v3에서 동일하지만 다르게 처리됩니다.
v2 API의 오버레이는 GMap2 객체의 addOverlay() 및 removeOverlay() 메서드를 사용하여 지도에 추가 및 삭제되었습니다. v3에서는 연결된 오버레이 옵션 클래스의 map 속성을 통해 지도에 오버레이를 할당합니다.
오버레이 객체의 setMap() 메서드를 호출하고 원하는 지도를 지정하여 오버레이를 직접 추가하거나 삭제할 수도 있습니다. 지도 속성을 null로 설정하면 오버레이가 삭제됩니다.
v3에는 clearOverlays() 메서드가 없습니다.
오버레이 집합을 관리하려면 오버레이를 보유하는 배열을 만들어야 합니다. 이 배열을 사용하면 배열의 각 오버레이에서 setMap()를 호출할 수 있습니다 (오버레이를 삭제해야 하는 경우 null 전달).
드래그 가능한 마커
기본적으로 마커는 클릭은 가능하지만 드래그는 불가능합니다. 다음 두 샘플은 드래그 가능한 마커를 추가합니다.
기본 마커 대신 사용자 지정 아이콘을 정의할 수 있습니다.
v2에서 커스텀 이미지를 사용하려면 G_DEFAULT_ICON type에서 GIcon 인스턴스를 만들고 수정하면 됩니다. 이미지가 기본 아이콘보다 크거나 작으면 GSize 인스턴스로 지정해야 합니다.
v3 API는 이 과정을 다소 단순화했습니다.
마커의 icon 속성을 맞춤 이미지의 URL로 설정하면 API에서 아이콘의 크기를 자동으로 조정합니다.
Maps JavaScript API는 복잡한 아이콘도 지원합니다.
복잡한 아이콘에는 여러 타일, 복잡한 도형이 포함되거나 이미지가 다른 오버레이에 비례하여 표시되는 방식의 '비슷한 항목 순서'가 지정될 수 있습니다. v2에서 마커에 도형을 추가하려면 각 GIcon 인스턴스에 추가 속성을 지정하고 이를 GMarker 생성자에 옵션으로 전달해야 합니다. v3에서는 이 방식으로 지정된 아이콘의 icon 속성을 Icon 유형의 객체로 설정해야 합니다.
v3에서 마커 섀도우는 지원되지 않습니다.
다음 예는 아이콘의 투명한 부분을 클릭할 수 없는 오스트레일리아 본다이 해변의 해변 깃발을 보여줍니다.
다중선은 LatLng 배열과 이러한 위치를 순서대로 연결하는 일련의 선분으로 구성됩니다.
v3에서 Polyline 객체를 만들고 표시하는 것은 v2에서 GPolyline 객체를 사용하는 것과 유사합니다. 다음 샘플은 싱가포르를 경유하여 취리히에서 시드니까지의 반투명 3픽셀 너비 최단 거리 보간 다중선을 그립니다.
v3에서는 인코딩된 다중선에서 직접 Polyline 객체를 만드는 기능이 지원되지 않습니다. 대신 The Geometry Library에서 다중선을 인코딩하고 디코딩하는 메서드를 제공합니다. 이 라이브러리를 로드하는 방법에 관한 자세한 내용은 v3 Maps API의 라이브러리를 참고하세요.
아래 예에서는 동일하게 인코딩된 다중선을 그립니다. v3 코드는 google.maps.geometry.encoding 네임스페이스의 decodePath() 메서드를 사용합니다.
폴리곤은 폐쇄된 루프 내 영역을 정의합니다. Polyline 객체와 마찬가지로 Polygon 객체는 순서가 지정된 일련의 점으로 구성됩니다. v3 Polygon 클래스는 v2 GPolygon 클래스와 거의 동일합니다. 단, 루프를 닫기 위해 더 이상 경로 끝에서 시작 정점을 반복할 필요가 없다는 점이 다릅니다. v3 API는 마지막 좌표를 첫 번째 좌표에 연결하는 획을 그려 다각형을 자동으로 닫습니다. 다음 코드 스니펫은 버뮤다 삼각형을 나타내는 다각형을 만듭니다.
v2와 v3에서 사용할 수 있는 지도 유형은 약간 다르지만 모든 기본 지도 유형은 두 API 버전에서 모두 사용할 수 있습니다. 기본적으로 v2는 표준 '페인팅된' 도로 지도 타일을 사용합니다. 그러나 v3에서는 google.maps.Map 객체를 만들 때 특정 맵 유형을 제공해야 합니다.
공통 지도 유형
v2와 v3에서는 4가지 기본 지도 유형을 사용할 수 있습니다.
MapTypeId.ROADMAP (G_NORMAL_MAP 대체)는 도로 지도 뷰를 표시합니다.
MapTypeId.SATELLITE (G_SATELLITE_MAP 대체) Google 어스 위성 이미지를 표시합니다.
MapTypeId.HYBRID (G_HYBRID_MAP 대체)는 일반 뷰와 위성 뷰를 혼합하여 표시합니다.
MapTypeId.TERRAIN (G_PHYSICAL_MAP 대체)는 지형 정보를 기반으로 실제 지도를 표시합니다.
다음은 지형 뷰에 대한 지형을 설정하는 v2와 v3의 예시입니다.
map.setMapType(G_PHYSICAL_MAP);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
Maps JavaScript API v3에서는 덜 일반적인 지도 유형도 몇 가지 변경했습니다.
지구 이외의 천체의 지도 타일은 v3 API에서 지도 유형으로 사용할 수 없지만 이 예와 같이 맞춤 지도 유형으로 액세스할 수 있습니다.
v3에는 v2의 G_SATELLITE_3D_MAP 유형을 대체하는 특수 지도 유형이 없습니다. 대신 이 라이브러리를 사용하여 v3 지도에 Google 어스 플러그인을 통합할 수 있습니다.
최대 확대/축소 이미지
위성 이미지를 높은 확대/축소 수준에서 제공하지 못할 수도 있습니다. 확대/축소 수준을 설정하기 전에 사용 가능한 최대 확대/축소 수준을 알고 싶다면 google.maps.MaxZoomService 클래스를 사용하세요. 이 클래스는 v2의 GMapType.getMaxZoomAtLatLng() 메서드를 대체합니다.
varpoint=newGLatLng(180*Math.random()-90,360*Math.random()-180);varmap=newGMap2(document.getElementById("map"));map.setUIToDefault();map.setCenter(point);map.setMapType(G_HYBRID_MAP);map.getCurrentMapType().getMaxZoomAtLatLng(point,function(response){if(response.status){map.setZoom(response.zoom);}else{alert("Error in Max Zoom Service.");}});
varmyLatlng=newgoogle.maps.LatLng(180*Math.random()-90,360*Math.random()-180);varmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:0,center:myLatlng,mapTypeId:google.maps.MapTypeId.HYBRID});varmaxZoomService=newgoogle.maps.MaxZoomService();maxZoomService.getMaxZoomAtLatLng(myLatlng,function(response){if(response.status==google.maps.MaxZoomStatus.OK){map.setZoom(response.zoom);}else{alert("Error in Max Zoom Service.");}});
항공 이미지
v3에서 항공 이미지를 사용 설정하면 컨트롤이 v2 GLargeZoomControl3D 컨트롤과 유사하며, 지원되는 방향으로 회전하는 전면 컨트롤이 추가됩니다.
이 지도에서 현재 45도 이미지를 사용할 수 있는 도시를 추적할 수 있습니다. 45도 이미지를 사용할 수 있으면 Maps API Satellite 버튼에 하위 메뉴 옵션이 추가됩니다.
레이어
레이어는 하나 이상의 오버레이로 구성된 지도상의 객체입니다. 단일 단위로 조작할 수 있으며 일반적으로 객체 모음을 반영합니다.
지원되는 계층
v3 API는 여러 가지 계층에 액세스를 제공합니다. 이러한 레이어는 다음 영역에서 v2 GLayer 클래스와 겹칩니다.
KmlLayer 객체는 KML 및 GeoRSS 요소를 v3 오버레이로 렌더링하여 v2 GeoXml 레이어에 상응하는 기능을 제공합니다.
TrafficLayer 객체는 v2 GTrafficOverlay 오버레이와 마찬가지로 교통 상황을 나타내는 레이어를 렌더링합니다.
이러한 계층은 v2와는 다릅니다. 차이점은 아래에 설명되어 있습니다. setMap()을 호출하고 레이어를 표시할 Map 객체를 전달하여 지도에 추가할 수 있습니다.
Maps JavaScript API는 지리 정보를 표시하기 위한 KML 및 GeoRSS 데이터 형식을 지원합니다. KML 또는 GeoRSS 파일을 지도에 포함하려면 공개적으로 액세스할 수 있어야 합니다. v3에서는 이러한 데이터 형식이 v2의 GGeoXml 객체를 대체하는 KmlLayer 인스턴스를 사용하여 표시됩니다.
v3 API는 KML을 렌더링할 때 더 유연하여 InfoWindows를 숨기고 클릭 응답을 수정할 수 있습니다. 자세한 내용은 v3 KML 및 GeoRSS 레이어 문서를 참조하세요.
KmlLayer를 렌더링할 때는 크기 및 복잡성 제한사항이 적용됩니다. 자세한 내용은 KmlLayer 문서를 참고하세요.
v2와 달리 v3에는 TrafficLayer 생성자에 대한 옵션이 없습니다. v3에서는 사고가 제공되지 않습니다.
서비스
지오코딩
Maps JavaScript API는 사용자 입력에서 동적으로 주소를 지오코딩하기 위한 geocoder 객체를 제공합니다. 알려진 정적 주소를 지오코딩하려면 Geocoding API 문서를 참고하세요.
Geocoding API가 대대적으로 업그레이드 및 개선되어 새로운 기능이 추가되고 데이터가 표시되는 방식이 변경되었습니다.
v2 API의 GClientGeocoder는 전방 및 역방향 지오코딩을 위한 두 가지 방법과 지오코딩 실행 방식에 영향을 미치는 추가 메서드를 제공했습니다. 반면 v3 Geocoder 객체는 입력 검색어(지오코딩 요청 객체 형식)가 포함된 객체 리터럴과 콜백 메서드를 사용하는 geocode() 메서드만 제공합니다. 요청에 텍스트 address 속성이 포함되어 있는지 또는 LatLng 객체가 포함되어 있는지에 따라 Geocoding API는 전방 지오코딩 응답 또는 역지오코딩 응답을 반환합니다. 지오코딩 요청에 추가 필드를 전달하여 지오코딩이 실행되는 방식에 영향을 줄 수 있습니다.
텍스트 address를 포함하면 전방 지오코딩이 트리거되며 이는 getLatLng() 메서드를 호출하는 것과 같습니다.
latLng 객체를 포함하면 역지오코딩이 트리거되며 이는 getLocations() 메서드를 호출하는 것과 같습니다.
bounds 속성을 포함하면 표시 영역 편향이 사용 설정되며 이는 setViewport() 메서드를 호출하는 것과 같습니다.
region 속성을 포함하면 지역 코드 편향이 사용 설정되며 이는 setBaseCountryCode() 메서드를 호출하는 것과 같습니다.
v3의 Geocoding 응답은 v2 응답과 매우 다릅니다. v3 API는 v2에서 사용하는 중첩 구조를 파싱하기 더 쉬운 더 평면적인 구조로 대체합니다. 또한 v3 응답은 더 자세합니다. 각 결과에는 각 결과의 해상도를 더 잘 파악하는 데 도움이 되는 여러 주소 구성요소가 있습니다.
다음 코드는 텍스트 주소를 가져와 지오코딩의 첫 번째 결과를 표시합니다.
vargeocoder=newGClientGeocoder();varinfoPanel;varmap;varAccuracyDescription=['Unknown accuracy','country level accuracy','region level accuracy','sub-region level accuracy','town level accuracy','post code level accuracy','street level accuracy','intersection level accuracy','address level accuracy','premise level accuracy',];functiongeocode_result_handler(response){if(!response||response.Status.code!=200){alert('Geocoding failed. '+response.Status.code);}else{varbounds=newGLatLngBounds(newGLatLng(response.Placemark[0].ExtendedData.LatLonBox.south,response.Placemark[0].ExtendedData.LatLonBox.west),newGLatLng(response.Placemark[0].ExtendedData.LatLonBox.north,response.Placemark[0].ExtendedData.LatLonBox.east));map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));varlatlng=newGLatLng(response.Placemark[0].Point.coordinates[1],response.Placemark[0].Point.coordinates[0]);infoPanel.innerHTML+='<p>1st result is <em>'+// No info about location typeresponse.Placemark[0].address+'</em> of <em>'+AccuracyDescription[response.Placemark[0].AddressDetails.Accuracy]+'</em> at <tt>'+latlng+'</tt></p>';varmarker_title=response.Placemark[0].address+' at '+latlng;map.clearOverlays();varmarker=marker=newGMarker(latlng,{'title':marker_title});map.addOverlay(marker);}}functiongeocode_address(){varaddress=document.getElementById('input-text').value;infoPanel.innerHTML='<p>Original address: '+address+'</p>';geocoder.getLocations(address,geocode_result_handler);}functioninitialize(){map=newGMap2(document.getElementById('map'));map.setCenter(newGLatLng(38,15),2);map.setUIToDefault();infoPanel=document.getElementById('info-panel');}
vargeocoder=newgoogle.maps.Geocoder();varinfoPanel;varmap;varmarker;functiongeocode_result_handler(result,status){if(status!=google.maps.GeocoderStatus.OK){alert('Geocoding failed. '+status);}else{map.fitBounds(result[0].geometry.viewport);infoPanel.innerHTML+='<p>1st result for geocoding is <em>'+result[0].geometry.location_type.toLowerCase()+'</em> to <em>'+result[0].formatted_address+'</em> of types <em>'+result[0].types.join('</em>, <em>').replace(/_/,' ')+'</em> at <tt>'+result[0].geometry.location+'</tt></p>';varmarker_title=result[0].formatted_address+' at '+latlng;if(marker){marker.setPosition(result[0].geometry.location);marker.setTitle(marker_title);}else{marker=newgoogle.maps.Marker({position:result[0].geometry.location,title:marker_title,map:map});}}}functiongeocode_address(){varaddress=document.getElementById('input-text').value;infoPanel.innerHTML='<p>Original address: '+address+'</p>';geocoder.geocode({'address':address},geocode_result_handler);}functioninitialize(){map=newgoogle.maps.Map(document.getElementById('map'),{center:newgoogle.maps.LatLng(38,15),zoom:2,mapTypeId:google.maps.MapTypeId.HYBRID});infoPanel=document.getElementById('info-panel');}
경로
Maps JavaScript API v3에서는 경로를 계산하기 위해 v2의 GDirections 클래스를 DirectionsService 클래스로 대체합니다.
v3의 route() 메서드는 v2 API의 load() 및 loadFromWaypoints() 메서드 모두를 대체합니다. 이 메서드는 입력 검색어와 응답 수신 시 실행할 콜백 메서드가 포함된 단일 DirectionsRequest 객체 리터럴을 사용합니다. v2의 GDirectionsOptions 객체 리터럴과 마찬가지로 이 객체 리터럴에 옵션을 제공할 수 있습니다.
Maps JavaScript API v3에서는 경로 요청을 제출하는 작업이 요청 렌더링 작업과 분리되었으며, 이제 DirectionsRenderer 클래스로 처리됩니다. setMap() 및 setDirections() 메서드를 통해 DirectionsRenderer 객체를 지도 또는 DirectionsResult 객체에 연결할 수 있습니다. 렌더러는 MVCObject이므로 속성의 변경사항을 감지하고 연결된 경로가 변경된 경우 지도를 업데이트합니다.
다음 코드는 주소의 보행자 전용 도로를 사용하여 특정 위치로 가는 도보 경로를 요청하는 방법을 보여줍니다. v3만 더블린 동물원의 보행자 전용 도로에 대한 도보 경로를 제공할 수 있습니다.
Google 스트리트 뷰는 서비스 범위 내 지정된 위치에서 360도 양방향 뷰를 제공합니다. v3 API는 스트리트 뷰 이미지를 표시하는 데 Flash® 플러그인이 필요했던 v2와 달리 브라우저 내에서 기본적으로 스트리트 뷰를 지원합니다.
스트리트 뷰 이미지는 v3의 StreetViewPanorama 객체 또는 v2의 GStreetviewPanorama 객체를 사용하여 지원됩니다. 이러한 클래스는 인터페이스가 다르지만 동일한 역할을 합니다. 즉, div 컨테이너를 스트리트 뷰 이미지와 연결하고 스트리트 뷰 파노라마의 위치와 시점을 지정할 수 있도록 합니다.
functioninitialize(){varfenwayPark=newGLatLng(42.345573,-71.098326);panoramaOptions={latlng:fenwayPark,pov:{heading:35,pitch:5,zoom:1}};varpanorama=newGStreetviewPanorama(document.getElementById('pano'),panoramaOptions);GEvent.addListener(myPano,"error",handleNoFlash);}functionhandleNoFlash(errorCode){if(errorCode==FLASH_UNAVAILABLE){alert('Error: Your browser does not support Flash');return;}}
v3의 StreetViewService 객체 또는 v2의 유사한 GStreetviewClient 객체를 통해 스트리트 뷰 데이터에 직접 액세스할 수 있습니다. 두 API 모두 스트리트 뷰 데이터의 사용 가능 여부를 검색하거나 확인하고 위치 또는 파노라마 ID로 검색할 수 있는 유사한 인터페이스를 제공합니다.
v3에서 스트리트 뷰는 기본적으로 활성화되어 있습니다. 지도에 스트리트 뷰 페그맨 컨트롤이 표시되고 API는 지도 div를 재사용하여 스트리트 뷰 파노라마를 표시합니다. 다음 코드는 360도 파노라마를 별도의 div로 분리하여 v2 동작을 에뮬레이션하는 방법을 보여줍니다.
varmarker;varpanoClient=newGStreetviewClient();functioninitialize(){if(GBrowserIsCompatible()){varmyPano=newGStreetviewPanorama(document.getElementById('pano'));GEvent.addListener(myPano,'error',handleNoFlash);varmap=newGMap2(document.getElementById('map'));map.setCenter(newGLatLng(42.345573,-71.098326),16);map.setUIToDefault();GEvent.addListener(map,'click',function(overlay,latlng){if(marker){marker.setLatLng(latlng);}else{marker=newGMarker(latlng);map.addOverlay(marker);}varnearestPano=panoClient.getNearestPanorama(latlng,processSVData);});functionprocessSVData(panoData){if(panoData.code!=200){alert("Panorama data not found for this location.");}varlatlng=marker.getLatLng();vardLat=latlng.latRadians()-panoData.location.latlng.latRadians();vardLon=latlng.lngRadians()-panoData.location.latlng.lngRadians();vary=Math.sin(dLon)*Math.cos(latlng.latRadians());varx=Math.cos(panoData.location.latlng.latRadians())*Math.sin(latlng.latRadians())-Math.sin(panoData.location.latlng.latRadians())*Math.cos(latlng.latRadians())*Math.cos(dLon);varbearing=Math.atan2(y,x)*180/Math.PI;myPano.setLocationAndPOV(panoData.location.latlng,{yaw:bearing});}functionhandleNoFlash(errorCode){if(errorCode==FLASH_UNAVAILABLE){alert('Error: Your browser does not support Flash');return;}}}}
// Load the API with libraries=geometryvarmap;varmarker;varpanorama;varsv=newgoogle.maps.StreetViewService();functionradians(degrees){returnMath.PI*degrees/180.0};functioninitialize(){panorama=newgoogle.maps.StreetViewPanorama(document.getElementById("pano"));map=newgoogle.maps.Map(document.getElementById('map'),{center:newgoogle.maps.LatLng(42.345573,-71.098326),mapTypeId:google.maps.MapTypeId.ROADMAP,zoom:16});google.maps.event.addListener(map,'click',function(event){if(!marker){marker=newgoogle.maps.Marker({position:event.latLng,map:map});}else{marker.setPosition(event.latLng);}sv.getPanoramaByLocation(event.latLng,50,processSVData);});}functionprocessSVData(panoData,status){if(status==google.maps.StreetViewStatus.OK){alert("Panorama data not found for this location.");}varbearing=google.maps.geometry.spherical.computeHeading(panoData.location.latLng,marker.getPosition());panorama.setPano(panoData.location.pano);panorama.setPov({heading:bearing,pitch:0,zoom:1});panorama.setVisible(true);marker.setMap(panorama);}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-01-10(UTC)"],[[["Google Maps API v2 is retired and websites using it must migrate to v3."],["Migration involves obtaining a new API key, updating the API loading code, and adapting application code to v3's namespace and objects."],["V3 offers numerous improvements, including enhanced performance, modernized client-side usage limits, wider browser support, new features, and updated services."],["Key code changes include using the `google.maps` namespace, replacing obsolete methods, and adopting v3's approach to controls, overlays, and services."],["Developers should consult the provided v3 documentation and resources for detailed guidance and code examples during migration."]]],[]]