Maps JavaScript API v2는 2021년 5월 26일부터 더 이상 사용할 수 없습니다. 이에 따라 사이트의 v2 지도 작동이 중지되고 자바스크립트 오류가 반환됩니다. 사이트에서 지도를 계속 사용하려면 Maps JavaScript API v3으로 이전하세요. 이 가이드는 프로세스를 안내합니다.
개요
애플리케이션마다 마이그레이션 프로세스가 약간씩 다릅니다. 그러나 모든 프로젝트에 공통으로 적용되는 몇 가지 단계가 있습니다.
- 새 키를 가져옵니다. 이제 Maps JavaScript API에서 Google Cloud Console을 사용하여 키를 관리합니다. 아직 v2 키를 사용하고 있다면 마이그레이션을 시작하기 전에 새 API 키를 가져와야 합니다.
- API 부트스트랩을 업데이트합니다. 대부분의 애플리케이션에서는
다음 코드를 사용하여 Maps JavaScript API v3을 로드합니다.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- 코드 업데이트. 필요한 변경사항은 애플리케이션에 따라 크게 달라집니다. 일반적인 변경사항은 다음과 같습니다.
- 항상 google.maps 네임스페이스를 참조합니다. v3에서 모든 Maps JavaScript API 코드는 전역 네임스페이스가 아닌
google.maps.*
네임스페이스에 저장됩니다. 이 객체의 일부로 대부분의 객체 이름도 변경되었습니다. 예를 들어 이제 GMap2
대신 google.maps.Map
를 로드합니다.
- 더 이상 사용되지 않는 메서드에 대한 참조를 삭제합니다. 다양한 범용 유틸리티 메서드(예:
GDownloadURL
, GLog
)가 삭제되었습니다.
이 기능을 타사 유틸리티 라이브러리로 대체하거나 코드에서 이러한 참조를 삭제합니다.
- (선택사항) 코드에 라이브러리를 추가합니다. 많은 기능이 유틸리티 라이브러리로 외부화되어 있으므로 각 앱은 사용할 API 부분만 로드하면 됩니다.
- (선택사항) v3 extern을 사용하도록 프로젝트를 구성합니다.
v3 extern을 사용하면 클로저 컴파일러로
코드를 검증하거나 IDE에서 자동 완성을 트리거할 수 있습니다.
고급 컴파일 및 익스텐션에 대해 자세히 알아보세요.
- 테스트하고 반복합니다. 아직 해야 할 작업이 남아 있지만 다행히 새 v3 지도 애플리케이션으로의 진행은 잘 진행되고 있습니다.
Maps JavaScript API V3의 변경사항
이전을 계획하기 전에 Maps JavaScript API v2와 Maps JavaScript API v3의 차이점을 이해해야 합니다. Maps JavaScript API의 최신 버전은 최신 자바스크립트 프로그래밍 기술, 라이브러리 사용 확대, 단순화된 API에 중점을 두고 처음부터 작성되었습니다.
API에 여러 새로운 기능이 추가되었으며 여러 가지 익숙한 기능이 변경되거나 삭제되었습니다. 이 섹션에서는 두 릴리스의 주요 차이점을 중점적으로 설명합니다.
v3 API 변경 사항:
- 핵심 라이브러리가 간소화되었습니다. 다수의 보조 함수를 라이브러리로 이전하여 핵심 API의 로드 및 파싱 시간을 단축하여 어느 기기에서나 지도를 빠르게 로드할 수 있습니다.
- 다각형 렌더링, 마커 배치 등 여러 지형지물의
성능이 개선되었습니다.
- 모바일 프록시 및 기업 방화벽에서 사용하는 공유 주소를 더 효과적으로 수용하기 위한 새로운 클라이언트 측 사용량 한도
- 여러 최신 브라우저 및 모바일 브라우저에 대한 지원이 추가되었습니다. Internet Explorer 6 지원이 삭제되었습니다.
- 범용 도우미 클래스(
GLog
또는 GDownloadUrl
)가 많이 삭제되었습니다. 현재 Closure 또는 jQuery와 같이 유사한 기능을 제공하는 훌륭한 자바스크립트 라이브러리가 많이 있습니다.
- 모든 모바일 기기에서 로드되는 HTML5 스트리트 뷰가 구현되었습니다.
- 맞춤 스트리트 뷰 파노라마를
나만의 사진으로 제공하여 스키 슬로프, 매물로 나온 주택, 기타 관심 있는 장소의 파노라마를
공유할 수 있습니다.
- 스타일 지도 맞춤설정을 통해 고유한 시각적 스타일에 맞춰
기본 지도의 요소 표시를 변경할 수 있습니다.
- ElevationService 및 Distance Matrix와 같은 여러 새로운 서비스를 지원합니다.
- 개선된 경로 서비스는 대체 경로, 경로 최적화 (이동 영업 담당자 문제의 대략적인 솔루션), 자전거 경로 (자전거 레이어 포함), 대중교통 경로, 드래그 가능한 경로를 제공합니다.
- Geocoding API v2의
accuracy
값보다
더 정확한 유형 정보를 제공하는 업데이트된 지오코딩 형식입니다.
- 하나의 지도에서 여러 정보 창 지원
새로운 키
Maps JavaScript API v3는 v2의 새로운 키 시스템을 사용합니다. 애플리케이션에서 이미 v3 키를 사용하고 있을 수 있으며 이 경우 변경할 필요가 없습니다. 확인하려면 Maps JavaScript API를 로드하는 URL에서 key
매개변수를 확인하세요. 키 값이 &ABQIAA'로 시작하면 v2 키를 사용하는 것입니다. v2 키가 있는 경우 마이그레이션의 일환으로 v3 키로 업그레이드해야 합니다.
Maps JavaScript API v3을 로드할 때 키가 전달됩니다.
API 키 생성 자세히 알아보기
Google Maps API for Work 고객은 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 Maps API for Work 고객은
client
매개변수를 사용해야 합니다.
- (Google Maps Platform 프리미엄 플랜만 해당) Google Maps Platform 프리미엄 플랜 개발자 가이드의 설명에 따라
client
매개변수가 제공되었는지 확인합니다.
v
매개변수를 삭제하여 최신 출시 버전을 요청하거나 그에 따라 v3 버전 관리 체계에 따라 값을 변경합니다.
- (선택사항)
hl
매개변수를 language
로 바꾸고 값을 유지합니다.
- (선택사항)
libraries
매개변수를 추가하여 선택적 라이브러리를 로드합니다.
가장 간단한 경우 v3 부트스트랩은 API 키 매개변수만 지정합니다.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
아래 예시에서는 독일어로 된 최신 버전의 Maps JavaScript API v2를 요청합니다.
<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>
아래 예시는 v3 요청과 같습니다.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>
google.maps 네임스페이스 도입
Maps JavaScript API v3에서 가장 눈에 띄는 변화는 google.maps
네임스페이스 도입입니다. v2 API는 기본적으로 모든 객체를 전역 네임스페이스에 배치하여 이름 충돌이 발생할 수 있습니다. v3 내에서 모든 객체는 google.maps
네임스페이스 내에 있습니다.
애플리케이션을 v3로 마이그레이션할 때는 새 네임스페이스를 사용하도록 코드를 변경해야 합니다. 안타깝게도 다음은 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)를 제공하는 훌륭한 자바스크립트 라이브러리가 많습니다.
Maps JavaScript API v3에서는 다음과 같은 클래스가 없습니다.
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
코드 비교
v2와 v3 API로 작성된 비교적 간단한 두 애플리케이션을 비교해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
보시다시피 두 애플리케이션 사이에는 몇 가지 차이점이 있습니다. 눈에 띄는 변경사항은 다음과 같습니다.
- 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 v2와 v3에서 가장 많이 사용되는 기능을 자세히 비교합니다. 참조의 각 섹션은 개별적으로 읽을 수 있도록 설계되었습니다. 이 참조의 내용을 완전히 읽지 마세요. 대신 이 자료를 사용하여 사례별로 마이그레이션을 지원하세요.
- 이벤트 - 이벤트를 등록하고 처리합니다.
- 컨트롤 - 지도에 표시되는
내비게이션 컨트롤을 조작합니다.
- 오버레이 - 지도에 객체를 추가하고
수정합니다.
- 지도 유형 - 기본 지도를 구성하는 타일
- 레이어 - KML 또는 교통정보 레이어와 같은 그룹으로 콘텐츠를 추가하고 수정합니다.
- 서비스 - Google의 지오코딩, 경로, 스트리트 뷰 서비스 사용
이벤트
Maps JavaScript API v3의 이벤트 모델은 v2와 유사하지만
내부적으로 많은 사항이 변경되었습니다.
MVC 지원의 새로운 이벤트
v3 API는 MVC 상태 변화를 반영하여 새로운 이벤트 유형을 추가합니다. 이제 두 가지 유형의 이벤트가 있습니다.
- 사용자 이벤트 (예: "click" 마우스 이벤트)는 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에서 동일합니다.
- 이벤트 리스너를 만들면 불투명한 객체 (v2의 경우 GEventListener, v3의 MapsEventListener)가 반환됩니다.
- 이벤트 리스너를 삭제하려면 이 객체를
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 map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
GEvent.addListener(map,'click', function(overlay, latlng) {
if (latlng) {
var marker = new GMarker(latlng);
map.addOverlay(marker);
}
});
// Passes only an event argument
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
컨트롤
Maps JavaScript API에서 사용자가 지도와 상호작용할 수 있는 UI 컨트롤을 표시합니다. API를 사용하여 이러한 컨트롤이 표시되는 방식을 맞춤설정할 수 있습니다.
컨트롤 유형 변화
control
유형의 일부 변경사항이 v3 API에 도입되었습니다.
- v3 API는 지형
지도, 맞춤 지도 유형 추가 기능 등
추가 지도 유형을 지원합니다.
- v2 계층 구조 컨트롤
GHierarchicalMapTypeControl
는 더 이상 사용할 수 없습니다.
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
컨트롤을 사용하여 유사한 효과를 얻을 수 있습니다.
- v2의
GMapTypeControl
에서 제공하는 가로 레이아웃은 v3에서 사용할 수 없습니다.
지도에 컨트롤 추가
Maps JavaScript API v2에서는 지도 객체의 addControl()
메서드를 통해 지도에 컨트롤을 추가합니다. v3에서는 컨트롤에 직접 액세스하거나 이를 수정하는 대신 연결된 MapOptions
객체를 수정합니다. 아래 샘플은
지도를 맞춤설정하여 다음 컨트롤을 추가하는 방법을
보여줍니다.
- 사용자가 이용 가능한 지도 유형을 전환할 수 있는 버튼
- 지도 배율
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
지도에 컨트롤 위치 지정
v3에서는 컨트롤의 위치에 상당히 많은 변화가 있었습니다. v2에서
addControl()
메서드는 지도의 모서리를 기준으로 컨트롤의
위치를 지정할 수 있는 두 번째 매개변수를 선택적으로 사용합니다.
v3에서는 컨트롤 옵션의 position
속성을 통해 컨트롤 위치를 설정합니다. 이러한 컨트롤의 배치는 절대적이지 않습니다. 대신 API는 특정 제약 조건 (예: 지도 크기) 내에서 기존 지도 요소 주위에 컨트롤을 지능적으로 '유동'으로 배치합니다.
이를 통해 기본 컨트롤이 개발자의 컨트롤과 호환됩니다.
자세한 내용은 v3의 위치 지정 제어를 참고하세요.
다음 코드는 위 샘플에서 컨트롤 위치를 다시 지정합니다.
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add map type control
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
// Add scale
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
사용자 지정 컨트롤
Maps JavaScript API를 사용하면 맞춤 내비게이션 컨트롤을 만들 수 있습니다.
v2 API로 컨트롤을 맞춤설정하려면 GControl
클래스를 서브클래스화하고 initialize()
및 getDefaultPosition()
메서드의 핸들러를 정의합니다.
v3에는 GControl
클래스에 상응하는 클래스가 없습니다. 대신 컨트롤은 DOM 요소로 표시됩니다. v3 API로 맞춤 컨트롤을 추가하려면 생성자에서 컨트롤의 DOM 구조를 Node
(예: <div>
요소)의 하위 요소로 만들고 DOM 이벤트를 처리하는 이벤트 리스너를 추가합니다. Node
를 maps' controls[position]
배열로 푸시하여
맞춤 컨트롤 인스턴스를 지도에
추가합니다.
위에 언급된 인터페이스 요구사항을 준수하는 HomeControl
클래스 구현을 고려하여 (자세한 내용은 맞춤 컨트롤 문서 참고) 다음 코드 샘플은 지도에 맞춤 컨트롤을 추가하는 방법을 보여줍니다.
map.addControl(new HomeControl(),
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
homeControlDiv);
오버레이
오버레이는 지도에 점, 선, 영역 또는 객체 컬렉션을 지정하기 위해
추가하는 객체를 나타냅니다.
오버레이 추가 및 삭제
오버레이로 표시되는 객체 유형은 v2와 v3에서 동일하지만 다른 방식으로 처리됩니다.
v2 API의 오버레이는 GMap2
객체의
addOverlay()
및 removeOverlay()
메서드를 사용하여 지도에 추가 및
삭제되었습니다. v3에서는 연결된 오버레이 옵션 클래스의 map
속성을 통해
지도를 오버레이에 할당합니다.
오버레이 객체의 setMap()
메서드를 호출하고 원하는 지도를 지정하여 오버레이를 직접 추가하거나 삭제할 수도 있습니다. 지도 속성을 null
로 설정하면 오버레이가 삭제됩니다.
v3에는 clearOverlays()
메서드가 없습니다.
오버레이 집합을 관리하려면 오버레이를 보유할 배열을 만들어야 합니다. 이 배열을 사용하면 배열의 각 오버레이에서 setMap()
를 호출할 수 있습니다. 삭제해야 하면 null
를 전달합니다.
드래그 가능한 마커
기본적으로 마커는 클릭은 가능하지만 드래그는 불가능합니다. 다음 두 샘플에서는 드래그 가능한 마커를 추가합니다.
var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);
var marker = new GMarker(latLng, {
draggable: true
});
map.addOverlay(marker);
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
document.getElementById('map'), {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: map
});
아이콘
기본 마커 대신 사용자 지정 아이콘을 정의할 수 있습니다.
v2에서 커스텀 이미지를 사용하려면 G_DEFAULT_ICON type
에서 GIcon
인스턴스를 만들어 수정하면 됩니다. 이미지가 기본 아이콘보다 크거나 작으면 GSize
인스턴스를 사용하여 지정해야 합니다.
v3 API는 이 과정을 다소 단순화했습니다.
마커의 icon
속성을
맞춤 이미지의 URL로 설정하기만 하면 API가 자동으로 아이콘의
크기를 조절합니다.
Maps JavaScript API는 복잡한 아이콘도 지원합니다.
복잡한 아이콘은 여러 타일이나 복잡한 모양을 포함하거나 다른 오버레이와 비교하여 이미지를 표시하는 '스택 순서'를 지정할 수 있습니다. v2의 마커에 도형을 추가하려면
각 GIcon
인스턴스에
추가 속성을 지정하고 이를 GMarker
생성자의 옵션으로 전달해야 합니다. v3에서 이 방식으로 지정된 아이콘은 icon
속성을 Icon
유형의 객체로 설정해야 합니다.
v3에서 마커 섀도우는 지원되지 않습니다.
다음 예는 오스트레일리아의 본다이 비치에서 해변 플래그를 표시하며 아이콘의 투명한 부분은 클릭할 수 없습니다.
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);
map.addOverlay(new GMarker(bbLatLng, {
icon: flagIcon
}));
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var bbMarker = new google.maps.Marker({
icon: '/images/beachflag.png'
shape: shape,
position: bbLatLng,
map: map
});
다중선
다중선은 LatLng
배열과 이러한 위치를 순서가 지정된
선으로 연결하는 일련의 선 세그먼트로 구성됩니다.
v3에서 Polyline
객체를 만들고 표시하는 방법은 v2에서 GPolyline
객체를 사용하는 것과 비슷합니다. 다음 샘플에서는
싱가포르를 통해 취리히에서 시드니로 반투명한 3픽셀 너비의 측지 다중선을
그립니다.
var polyline = new GPolyline(
[
new GLatLng(47.3690239, 8.5380326),
new GLatLng(1.352083, 103.819836),
new GLatLng(-33.867139, 151.207114)
],
'#FF0000', 3, 0.5, {
geodesic: true
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.3690239, 8.5380326),
new google.maps.LatLng(1.352083, 103.819836),
new google.maps.LatLng(-33.867139, 151.207114)
],
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
geodesic: true
});
polyline.setMap(map);
인코딩된 폴리라인
v3에서는 인코딩된 다중선에서
Polyline
객체를 직접 만들 수 없습니다. 대신 도형 라이브러리는
다중선을 인코딩하고 디코딩하는 메서드를 제공합니다. 이 라이브러리를 로드하는 방법에 대한 자세한 내용은 v3 Maps API의
라이브러리를 참고하세요.
아래의 예는 동일한 인코딩된 다중선을 그립니다. v3 코드는
google.maps.geometry.encoding
네임스페이스의 decodePath()
메서드를
사용합니다.
var polyline = new GPolyline.fromEncoded({
points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
levels: 'PPP',
zoomFactor: 2,
numLevels: 18,
color: '#ff0000',
opacity: 0.8,
weight: 3
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(
'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
});
polyline.setMap(map);
다각형
폴리곤은 폐쇄된 루프 내 영역을 정의합니다. Polyline
객체와 마찬가지로 Polygon
객체는 순서가 지정된 시퀀스의 일련의 점으로 구성됩니다. v3 Polygon
클래스는 v2 GPolygon
클래스와 매우 동일하지만, 예외적으로 루프를 닫기 위해 경로 끝에 시작 꼭짓점을 반복할 필요가 없습니다. v3 API는 마지막 좌표를 다시 첫 번째 좌표에 연결하는
획을 그려서 자동으로 다각형을
닫습니다. 다음 코드 스니펫은 버뮤다 삼각지를 나타내는 다각형을 만듭니다.
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(24.886436, -70.268554), 5);
var bermudaTriangle = new GPolygon(
[
new GLatLng(25.774252, -80.190262),
new GLatLng(18.466465, -66.118292),
new GLatLng(32.321384, -64.75737),
new GLatLng(25.774252, -80.190262)
],
'#FF0000', 2, 0.8, '#FF0000', 0.35);
map.addOverlay(bermudaTriangle);
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(24.886436, -70.268554),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
사용자 편집 가능 셰이프
폴리라인과 폴리곤을 사용자가 편집하게 만들 수도 있습니다. 다음 코드 스니펫은 동등합니다.
map.addOverlay(polyline);
polyline.enableEditing();
polyline.setMap(map);
polyline.setEditable(true);
고급 그리기 기능에 관한 자세한 내용은 v3 문서의 그리기 라이브러리를 참고하세요.
정보 창
InfoWindow
는 지도 위의 플로팅 창에 콘텐츠를
표시합니다. v2와 v3 정보 창은 몇 가지 중요한 차이가 있습니다.
- v2 API는 지도당
GInfoWindow
만 지원하는 반면
v3 API는 각 지도에서 여러 개의 동시 InfoWindow
를
지원합니다.
- 지도를 클릭하면 v3
InfoWindow
는
열린 상태로 유지됩니다. 지도를 클릭하면 v2 GInfoWindow
이
자동으로 닫힙니다. Map
객체에 click
리스너를 추가하여 v2 동작을 에뮬레이션할 수 있습니다.
- v3 API는 탭으로 표시된
InfoWindow
을 기본적으로 지원하지 않습니다.
지면 오버레이(Ground Overlays)
지도에 이미지를 배치하려면 GroundOverlay
객체를 사용해야 합니다. GroundOverlay
의 생성자는 기본적으로 v2와 v3에서 동일합니다. 이미지의 URL과 이미지 경계를 매개변수로 지정합니다.
다음 예는 뉴저지주 뉴어크의 오래된 지도를 오버레이로 지도에 배치합니다.
var bounds = new GLatLngBounds(
new GLatLng(40.716216, -74.213393),
new GLatLng(40.765641, -74.139235));
var overlay = new GGroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
map.addOverlay(overlay);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
var overlay = new google.maps.GroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
overlay.setMap(map);
지도 유형
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()
메서드를 대체합니다.
var point = new GLatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(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.");
}
});
var myLatlng = new google.maps.LatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
document.getElementById("map"),{
zoom: 0,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.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° 이미지가 있으면 지도 API 위성 버튼에 하위 메뉴 옵션이 추가됩니다.
레이어
레이어는 하나 이상의 오버레이로 구성된
지도상의 객체입니다. 단일 단위로 조작할 수 있으며 일반적으로 객체 컬렉션을 반영합니다.
지원되는 계층
v3 API는 여러 가지 계층에 액세스를 제공합니다. 이러한 레이어는 다음 영역의 v2 GLayer
클래스와 겹칩니다.
-
KmlLayer
객체는 KML 및 GeoRSS 요소를 v3 오버레이로 렌더링하여 v2 GeoXml
레이어에 해당하는 항목을 제공합니다.
TrafficLayer
객체는 v2 GTrafficOverlay
오버레이와 마찬가지로
교통 상황을 보여주는 레이어를
렌더링합니다.
이러한 계층은 v2와는 다릅니다. 차이점은 다음과 같습니다. setMap()
를 호출하고
레이어를 표시할 Map
객체에 전달하여
지도에 추가할 수 있습니다.
지원되는 레이어에 관한 자세한 내용은 레이어 문서를 참고하세요.
KML 및 GeoRSS 계층
Maps JavaScript API는 지리 정보를 표시하기 위한 KML 및 GeoRSS 데이터 형식을 지원합니다. KML 또는 GeoRSS 파일을
지도에 포함하려면 공개적으로 액세스할 수 있어야 합니다. v3에서 이러한 데이터 형식은 v2의 GGeoXml
객체를 대체하는 KmlLayer
인스턴스를 사용하여 표시됩니다.
v3 API는 KML을 렌더링할 때 더 유연하므로 Lookup을 표시하지 않고 클릭 응답을 수정할 수 있습니다. 자세한 내용은 v3 KML 및 GeoRSS 레이어 문서를 참조하세요.
KmlLayer
를 렌더링할 때 크기 및 복잡도 제한이 적용됩니다. 자세한 내용은 KmlLayer 문서를 참고하세요.
다음 샘플에서는 KML 파일 로드 방법을 비교합니다.
geoXml = new GGeoXml(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
교통량 계층
v3에서는 TrafficLayer
객체를 사용하여 지도에 실시간 교통정보를
추가할 수 있습니다 (지원되는 경우). 요청 시점의 트래픽 정보가 제공됩니다. 이 예시는 로스앤젤레스의 교통 정보를 보여줍니다.
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
v2와 달리 v3에는 TrafficLayer
생성자에 대한 옵션이 없습니다. v3에서는 사고가 제공되지 않습니다.
서비스
Geocoding
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의 지오코딩 응답은 v2 응답과 매우 다릅니다. v3 API는 v2에서 사용하는 중첩된 구조를 파싱하기 더 쉬운 더 평평한 구조로 바꿉니다. 또한 v3 응답이 더 상세합니다. 각 결과에는 몇 가지 주소 구성요소가 있어 각 결과의 해상도를 더 효과적으로 파악할 수 있습니다.
다음 코드는 텍스트 주소를 가져와 지오코딩한 첫 번째 결과를 보여줍니다.
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'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',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '<p>1st result is <em>' +
// No info about location type
response.Placemark[0].address +
'</em> of <em>' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
'</em> at <tt>' + latlng + '</tt></p>';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_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>';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.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
클래스로 처리됩니다. DirectionsRenderer
객체를
setMap()
및 setDirections()
메서드를 통해
모든 지도 또는 DirectionsResult
객체에
연결할 수 있습니다. 렌더기는
MVCObject
이므로 속성의 변경사항을 감지하고
관련 경로가 변경되면 지도를 업데이트합니다.
다음 코드는 주소의 보행자 경로를 사용하여 특정 위치로 도보 경로를 요청하는 방법을 보여줍니다. 더블린 동물원의
도보 경로는 v3만 제공할 수
있습니다.
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsRenderer.setPanel(document.getElementById("route"));
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}
스트리트 뷰
Google 스트리트 뷰는 서비스 지역 내 지정된 위치에서 360° 대화형 뷰를 제공합니다. 스트리트 뷰 이미지를 표시하기 위해 Flash® 플러그인이 필요한 v2와 달리 v3 API는 브라우저 내에서 기본적으로 스트리트 뷰를 지원합니다.
스트리트 뷰 이미지는 v3에서 StreetViewPanorama
객체 또는 v2에서 GStreetviewPanorama
객체를 사용하여 지원됩니다. 이러한 클래스는 다른 인터페이스를 사용하지만 동일한 역할을 합니다. div
컨테이너를 스트리트 뷰 이미지와 연결하고 스트리트 뷰 파노라마의 위치 및 POV (시점)를 지정할 수 있게 하는 것입니다.
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
v3의 StreetViewService
객체나 v2의 유사한 GStreetviewClient
객체를 통해 스트리트 뷰 데이터에 직접 액세스할 수 있습니다. 둘 다 스트리트 뷰 데이터의 검색 또는 사용 가능 여부를 확인하는 유사한 인터페이스를 제공하고, 위치 또는 파노라마 ID로 검색할 수 있도록 합니다.
v3에서 스트리트 뷰는 기본적으로 활성화되어 있습니다. 지도가 스트리트 뷰 페그맨 컨트롤과 함께 표시되고 API가 지도 div를 재사용하여 스트리트 뷰 파노라마를 표시합니다. 다음 코드는 스트리트 뷰 파노라마를 별도의 div로 구분하여 v2 동작을 에뮬레이션하는 방법을 보여줍니다.
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = 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);
}