Google Maps JavaScript API 버전 2는 사용이 중단되었습니다. 이 가이드는 이미 Google Maps JavaScript API v2를 사용 중인 개발자가 버전 3으로 코드를 마이그레이션하는 것을 돕기 위해 작성되었습니다.
Google Maps JavaScript API v2와 v3 간에 많은 사항들이 변경되었습니다. 새로운 API에서 작업을 시작하면 얼마 지나지 않아 단순한 점증적 업그레이드가 아니라는 것을 깨닫게 될 것입니다. 좋은 소식이 있다면 뛰어난 기능들이 많이 추가되었고 개발자의 시점에서 API의 전반적인 사용 편의성이 개선되었다는 것입니다. Google Maps JavaScript API v2에서 Google Maps JavaScript API v3로 업그레이드하고자 하는 분들을 위해 이 가이드는 업그레이드 과정을 도와주고 v2 API 사용자를 위한 가장 일반적인 몇 가지 변경 사항을 설명합니다.
개요
모든 애플리케이션은 마이그레이션 절차가 약간씩 다릅니다. 그러나 모든 프로젝트에 공통으로 존재하는 몇 가지 단계가 있습니다.
- 새 키 가져오기. Google Maps JavaScript API는 Google API Console을 사용하여 키를 관리합니다. 마이그레이션을 시작하기 전에 새 API 키를 가져와야 합니다.
- API 부트스트랩 업데이트. 대부분 애플리케이션은 다음 코드로 Google Maps JavaScript API v3를 로드합니다.
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true_OR_false"></script>
- 코드 업데이트. 애플리케이션마다 변경이 필요한 정도가 다릅니다. 일반적인 변경 사항:
- 항상 google.maps 네임스페이스를 참조합니다. v3에서 모든 Google Maps JavaScript API 코드는 전역 네임스페이스가 아니라
google.maps.*
네임스페이스에 저장됩니다. 이 과정에서 대부분 객체의 이름도 변경되었습니다. 예를 들어 이제 GMap2
대신 google.maps.Map
을 로드해야 합니다.
- 사용하지 않는 메서드에 대한 참조를 제거합니다.
GDownloadURL
이나 GLog
같은 범용 유틸리티 메서드가 다수 제거되었습니다. 이 기능을 타사 유틸리티 라이브러리로 대체하거나 이 참조를 코드에서 제거하세요.
- (선택 항목) 코드에 라이브러리를 추가합니다. 많은 기능이 유틸리티 라이브러리로 이동되었기 때문에 각 앱은 사용할 API 부분만 로드하면 됩니다.
- (선택 항목) v3 extern을 사용하도록 프로젝트를 구성합니다. v3 extern은 Closure Compiler로 코드의 유효성을 검사하거나 IDE에서 자동 완성을 트리거하는 데 사용될 수 있습니다. 고급 컴파일 및 extern에 대해 자세히 알아보세요.
- 테스트 및 반복. 아직 해야 할 작업이 다소 남아 있지만 이제 새로운 v3 지도 애플리케이션으로의 마이그레이션이 거의 완료되었습니다!
Google Maps JavaScript API v3 변경 사항
마이그레이션을 계획하기 전에 시간을 할애하여 Google Maps JavaScript API v2와 Google Maps JavaScript API v3의 차이점을 이해해야 합니다. Google Maps JavaScript API의 최신 버전은 최신 JavaScript 프로그래밍 기법, 라이브러리 사용 확대, 단순화된 API에 초점을 맞추고 처음부터 다시 개발되었습니다. API에 새로운 기능이 다수 추가되었고 여러 가지 익숙한 기능이 변경되거나 제거되기도 했습니다. 이 섹션에서는 두 릴리스의 핵심적 차이에 중점을 두고 설명합니다.
v3 API 변경 사항:
- 핵심 라이브러리가 간소화되었습니다. 다수의 보조 기능을 라이브러리로 이전하여 핵심 API의 로드 및 분석 시간을 단축하고 어느 기기에서나 지도를 신속히 로드할 수 있게 했습니다.
- 폴리곤 렌더링이나 마커 배치와 같은 여러 가지 기능의 성능이 개선되었습니다.
- 모바일 프록시와 기업 방화벽에서 사용하는 공동 주소를 더욱 잘 수용할 수 있도록 클라이언트측 사용 제한에 새로운 방법을 도입했습니다.
- 여러 가지 최신 브라우저와 모바일 브라우저 지원을 추가했습니다. Internet Explorer 6 지원이 중단되었습니다.
- 범용 도우미 클래스(
GLog
또는 GDownloadUrl
)가 다수 제거되었습니다. 현재 유사한 기능을 제공하는 많은 뛰어난 JavaScript 라이브러리가 있습니다(예: Closure 또는 jQuery).
- 모든 모바일 기기에서 로드되는 HTML5 스트리트 뷰가 구현되었습니다.
- 사진을 사용한 사용자 지정 스트리트 뷰 파노라마로 스키 슬로프, 매물로 나온 주택, 기타 흥미로운 장소를 공유할 수 있습니다.
- 스타일 지정 지도 사용자 지정으로 고유한 시각적 스타일에 맞게 기본 지도의 요소 표시 방법을 변경할 수 있습니다.
- 여러 가지 새로운 서비스(예: ElevationService 및 Distance Matrix)를 지원합니다.
- 길찾기 서비스를 개선하여 대체 경로, 경로 최적화(순회 세일즈맨 문제에 대한 근사 해), 자전거 길찾기(자전거 계층 사용), 대중교통 길찾기, 드래그 가능한 길찾기를 제공합니다.
- 지오코딩 형식을 업데이트하여 Google Maps Geocoding API v2의
accuracy
값보다 더욱 정확한 유형 정보를 제공합니다.
- 하나의 지도에서 여러 개의 정보 창을 지원합니다.
새로운 키
Google Maps JavaScript API v3는 새로운 키 시스템을 사용합니다. v2 키는 v3 애플리케이션에서 사용할 수 없습니다. 애플리케이션을 프로덕션에 배포하기 전에 v3 키를 추가할 경우:
- Google API Console에서 사용 보고서를 확인할 수 있습니다.
- 필요에 따라 추가 할당량을 구매할 수 있습니다.
- Google에서 개발자의 애플리케이션과 관련하여 연락을 취할 수 있습니다.
Google Maps JavaScript API v3를 로딩하면 키가 전달됩니다. 키 생성 방법:
-
Google API Console을 방문하여 Google 계정으로 로그인합니다.
- 왼쪽 메뉴의 Services 링크를 클릭하고 Google Maps JavaScript API v3 서비스를 활성화합니다.
- 서비스가 활성화되면 Simple API Access 섹션의 API Access 페이지에서 API 키를 구할 수 있습니다. Maps API 애플리케이션에서는 브라우저 앱용 키을 사용합니다.
Maps APIs for Work 라이선스의 클라이언트 ID
Google Maps APIs for Work 라이선스가 있다면 키 대신 클라이언트 ID를 사용해야 합니다. 이 두 가지를 함께 사용할 수 없습니다. 클라이언트 ID는 키와 유사하지만 다음과 같은 차이가 있습니다.
- 클라이언트 ID를 사용하는 Google Maps APIs 애플리케이션은 Maps Analytics와 같은 추가 기능이나 제한에 액세스할 수 있습니다.
- 클라이언트 ID는 Google Cloud Support가 생성하고 Maps APIs for Work 환영 편지를 통해 제공됩니다. Google API Console을 사용하여 클라이언트 ID를 생성하거나 찾지 않습니다.
- Google Maps JavaScript API를 로드할 때는
key
매개변수 대신 client
매개변수를 사용합니다. 예:
<script src="//maps.googleapis.com/maps/api/js?v=3&client=gme-yourclientid&sensor=true_or_false" type="text/javascript"></script>
클라이언트 ID는 언제나 gme-
라는 접두사가 붙습니다.
API 로드
코드에서 처음으로 수정해야 할 부분은 API 로드 방법과 관련이 있습니다. v2에서는 http://maps.google.com/maps
를 요청하여 Google Maps JavaScript API를 로드했습니다. Google Maps JavaScript API v3를 로드할 때 변경 사항:
//maps.googleapis.com/maps/api/js
에서 API를 로드합니다.
file
매개변수를 제거합니다.
- 필수
sensor
매개변수를 포함합니다.
- 새로운 v3 키로
key
매개변수를 업데이트합니다. Google Maps APIs for Work 고객은 client
매개변수를 사용해야 합니다.
- (Google Maps API 프리미엄 플랜만 해당)
client
매개변수가 Google Maps API 프리미엄 플랜 개발자 가이드에서 설명한 대로 제공되어야 합니다.
v
매개변수를 제거하고 최신 릴리스 버전을 요청하거나 v3 버전 관리 구성표에 따라 값을 변경합니다.
- (선택 항목)
hl
매개변수를 language
로 교체하고 값을 보존합니다.
- (선택 항목)
libraries
매개변수를 추가하여 옵션 라이브러리를 로드합니다.
가장 단순하게는 v3 부트스트랩이 API 키와 센서 매개변수만 지정합니다.
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
아래 예시에서는 Maps JavaScript API v2의 최신(시험용) 독일어 버전을 요청합니다.
<script type="text/javascript" src="//maps.google.com/maps?file=api&v=2.x&sensor=false&key=YOUR_API_KEY&hl=de"></script>
아래 예시는 v3 요청과 같습니다.
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY&language=de"></script>
버전 관리
v3에서는 특정 버전을 로드할 필요가 없습니다. 버전 매개변수를 생략하면 가장 최신의 시험용 API 버전을 받습니다. 개발자가 원할 경우, 특정 버전 번호나 최신(시험용) 버전, 가장 안정적인 동결 버전을 지정할 수 있습니다.
아래 표는 v2 버전 구성표를 v3에 매핑합니다.
v2 |
v3 |
사용 사례 |
2.s |
3.0 |
동결 버전. 현재 가장 오래된 버전. |
2 |
3 |
릴리스 버전. 가장 최신의 안정적인 버전. |
2.x |
3.exp |
시험용 버전. |
중요: Google Maps API 프리미엄 플랜 SLA는 시험용 버전에는 적용되지 않습니다. Google Maps API 프리미엄 플랜 애플리케이션은 최신 릴리스 또는 동결 버전을 사용해야 SLA를 적용할 수 있습니다.
google.maps 네임스페이스 도입
Google 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 또는 google.maps.PolylineOptions |
사용하지 않는 코드 제거
Google Maps JavaScript API v3는 v2와 대부분 기능이 동일하지만 일부 클래스는 지원이 중단되었습니다. 마이그레이션할 때는 지원이 중단된 클래스를 타사 유틸리티 라이브러리로 대체하거나 코드에서 참조를 제거해야 합니다. 유사한 기능을 제공하는 많은 뛰어난 JavaScript 라이브러리가 있습니다(예: Closure 또는 jQuery).
Google 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로 작성한 다소 단순한 애플리케이션 2개를 비교하겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY&sensor=false"
type="text/javascript"></script>
<style type="text/css">
html, body, #map { height: 100%; margin: 0; }
</style>
<script type="text/javascript">
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?sensor=false"
type="text/javascript"></script>
<style type="text/css">
html, body, #map { height: 100%; margin: 0; }
</style>
<script type="text/javascript">
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를 로드하는 주소가 변경되었습니다.
- v3에서
GBrowserIsCompatible()
와 GUnload()
메서드가 필요 없어져서 API에서 제거되었습니다.
GMap2
객체는 API의 중심 객체로 google.maps.Map
으로 대체되었습니다.
- 속성이 옵션 클래스를 통해 로드됩니다. 위의 예시에서는 지도를 로드하는 데 필요한 3가지 속성(
center
, zoom
및 mapTypeId
)을 인라인 처리된 MapOptions
객체를 통해 설정했습니다.
- v3에서는 기본 UI가 기본값입니다.
MapOptions
객체에서 disableDefaultUI
속성을 true로 설정하면 비활성화할 수 있습니다.
요약
이제 Google Maps JavaScript API v2에서 Google Maps JavaScript API v3로의 마이그레이션과 관련된 요점을 어느 정도 파악하셨을 것입니다. 여러분이 알아야 할 정보가 더 많이 있을 수도 있지만, 이는 여러분의 애플리케이션에 달려 있습니다. 다음 섹션에는 여러분이 마주할 만한 특정 사례와 관련된 마이그레이션 지침이 포함되어 있습니다. 또한, 업그레이드 과정에서 유용하게 사용할 만한 자료가 여러 가지 있습니다.
이 문서와 관련된 문제나 질문이 있다면 이 페이지 상단에 있는 이 문서에 대한 피드백 링크를 사용하세요.
이 섹션은 Google Maps JavaScript API v2와 v3의 가장 인기 있는 기능을 상세하게 비교합니다. 참조의 각 섹션은 개별적으로 읽어야 합니다. 이 참조 전체를 읽기보다는 각 사례에 따라 마이그레이션을 돕는 자료로 사용하는 것이 좋습니다.
- 이벤트 - 이벤트 등록 및 처리.
- 컨트롤 - 지도에 나타나는 내비게이션 컨트롤 조작.
- 오버레이 - 지도에 객체 추가 및 편집.
- 지도 유형 - 기본 지도를 구성하는 타일
- 레이어 - KML이나 교통 계층 등과 같이 그룹으로 콘텐츠 추가 및 편집.
- 서비스 - Google의 지오코딩, 길찾기, 스트리트 뷰 서비스 작업.
이벤트
Google Maps JavaScript API v3의 이벤트 모델은 v2와 유사하지만 자세히 들여다보면 v2에서 많은 변화가 있었습니다.
MVC 지원의 새로운 이벤트
v3 API는 MVC 상태 변화를 반영하여 새로운 이벤트 유형을 추가합니다. 이제 두 가지 유형의 이벤트가 있습니다.
- 사용자 이벤트(예: 마우스 "클릭" 이벤트)는 DOM에서 Google Maps JavaScript API로 전달됩니다. 이 이벤트는 표준 DOM 이벤트와 별개로 구분됩니다.
- MVC 상태 변경 알림은 Maps API 객체의 변경 사항을 반영하고
property_changed
규약에 따라 이름이 지정됩니다.
각 Maps API 객체는 다양한 이름이 지정된 이벤트를 내보냅니다. 특정 이벤트와 관련이 있는 애플리케이션은 해당 이벤트에 대해 이벤트 리스너를 등록하고 이러한 이벤트를 수신했을 때 코드를 실행해야 합니다. 이 이벤트 구동 방식의 메커니즘은 Google Maps JavaScript API v2와 v3에서 동일하지만, 네임스페이스가 GEvent
에서 google.maps.event
로 변경되었습니다.
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(Document Object Model) 이벤트를 수집하고 해당 이벤트에 응답하고자 할 경우, 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
});
});
컨트롤
Google Maps JavaScript API는 사용자가 지도와 상호작용할 수 있는 UI 컨트롤을 표시합니다. API를 사용하여 컨트롤이 나타나는 모습을 사용자 지정할 수 있습니다.
컨트롤 유형 변화
v3 API에서는 control
유형에 몇 가지 변화가 도입되었습니다.
- v3 API는 지형 지도와 사용자 지정 지도 유형 추가 기능을 포함하여 추가 지도 유형을 지원합니다.
- v2의 계층적 컨트롤인
GHierarchicalMapTypeControl
은 사용이 중단됩니다. google.maps.MapTypeControlStyle.HORIZONTAL_BAR
컨트롤을 사용하여 비슷한 효과를 낼 수 있습니다.
- v2에서
GMapTypeControl
이 제공하던 수평 레이아웃은 v3에서는 사용할 수 없습니다.
지도에 컨트롤 추가
Google 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);
사용자 지정 컨트롤
Google Maps JavaScript API를 사용하면 사용자 지정 내비게이션 컨트롤을 생성할 수 있습니다. v2 API에서 컨트롤을 사용자 지정하려면 GControl
클래스를 서브클래스로 만들고 initialize()
와 getDefaultPosition()
메서드의 핸들러를 정의했습니다. v3에는 GControl
클래스가 없습니다. 대신 컨트롤은 단순히 DOM 요소로 표현됩니다. v3 API에서 사용자 지정 컨트롤을 추가하려면 생성자에서 컨트롤의 DOM 구조를 Node
의 하위 요소(예: <div>
요소)로 생성하고 모든 DOM 이벤트를 처리할 이벤트 리스너를 추가하면 됩니다. Node
를 지도의 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는 이 과정을 다소 단순화했습니다. 사용자 지정 이미지의 URL에 마커의 icon
속성을 설정하기만 하면 API가 아이콘 크기를 자동 조절합니다.
Google 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에서는 루프를 닫기 위해 경로 끝에 시작 꼭지점을 반복할 필요가 없습니다. 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
를 기본적으로 지원하지 않습니다.
그라운드 오버레이
지도에 이미지를 배치하려면 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 Earth 위성 이미지를 표시합니다.
MapTypeId.HYBRID
(G_HYBRID_MAP
대체)는 일반 및 위성 뷰를 섞어서 표시합니다.
MapTypeId.TERRAIN
(G_PHYSICAL_MAP
대체)은 지형 정보를 기반으로 실제 지도를 표시합니다.
다음은 지형 뷰에 대한 지형을 설정하는 v2와 v3의 예시입니다.
map.setMapType(G_PHYSICAL_MAP);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
Google Maps JavaScript API v3는 사용 빈도가 낮은 지도 유형에도 몇 가지 변화를 주었습니다.
- Google Map Maker의 지도 타일은 Google 지도에서 사용할 수 있으며 대부분 국가에서 Google Maps JavaScript API를 Map Maker에서 사용할 수 있습니다.
- 지구를 제외한 천체의 지도 타일은 v3 API에서 지도 유형으로 제공되지 않으나 이 데모와 같이 사용자 지정 지도 유형으로 액세스할 수 있습니다.
- v3에는 v2의
G_SATELLITE_3D_MAP
유형을 대체하는 특별한 지도 유형이 없습니다. 대신 이 라이브러리를 사용하여 v3 지도에 Google Earth 플러그인을 통합할 수 있습니다.
최대 확대/축소 이미지
위성 이미지를 높은 확대/축소 수준에서 제공하지 못할 수도 있습니다. 확대/축소 수준을 설정하기 전에 가장 높은 확대/축소 수준이 어느 정도인지 알고 싶다면 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° 이미지가 제공되면 하위 메뉴 옵션이 Maps API 위성 버튼에 추가됩니다.
계층
계층은 하나 이상의 오버레이로 구성된 지도상의 객체입니다. 하나의 유닛으로 조작할 수 있고 일반적으로는 객체 컬렉션을 나타냅니다.
지원되는 계층
v3 API는 여러 가지 계층에 액세스를 제공합니다. 이러한 계층은 다음 영역에서 v2 GLayer
클래스와 중첩됩니다.
-
KmlLayer
객체는 KML과 GeoRSS 요소를 v3 오버레이로 렌더링하여 v2 GeoXml
계층과 같은 기능을 제공합니다.
TrafficLayer
객체는 v2 GTrafficOverlay
오버레이와 마찬가지로 교통 상황을 나타내는 계층을 렌더링합니다.
이러한 계층은 v2와는 다릅니다. 그 차이는 아래에 설명되어 있습니다. setMap()
을 호출하고 계층을 표시하는 Map
객체에 전달하여 계층을 지도에 추가할 수 있습니다.
지원되는 계층에 대한 자세한 내용은 계층 문서를 참조하세요.
KML 및 GeoRSS 계층
Google Maps JavaScript API는 지리 정보를 표시하기 위한 KML 및 GeoRSS 데이터 형식을 지원합니다. KML 또는 GeoRSS 파일을 지도에 포함하고 싶다면 공개적으로 액세스할 수 있어야 합니다. v3에서 이러한 데이터 형식은 v2의 GGeoXml
객체를 대체하는 KmlLayer
인스턴스를 사용하여 표시합니다.
v3 API는 KML을 렌더링할 때 더욱 유연하며, InfoWindows를 숨기고 클릭 응답을 수정할 수 있습니다. 자세한 내용은 v3 KML과 GeoRSS 계층 문서를 참조하세요.
KmlLayer
를 렌더링할 때는 크기와 복잡성 제한이 적용됩니다. 자세한 내용은 KmlLayer 문서를 참조하세요.
다음 샘플에서는 KML 파일 로드 방법을 비교합니다.
geoXml = new GGeoXml(
'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'http://googlemaps.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에서는 사고가 제공되지 않습니다.
서비스
지오코딩
Google Maps JavaScript API는 사용자 입력에 따라 동적으로 주소를 지오코딩하는 geocoder
객체를 제공합니다. 정적이고 알려진 주소를 지오코딩하려면 Google Maps Geocoding API 문서를 참조하세요.
Google Maps Geocoding API는 상당히 업그레이드 및 개선되어서 새로운 기능이 추가되고 데이터 표현 방식이 변경되었습니다.
v2 API의 GClientGeocoder
는 정방향 지오코딩과 역지오코딩을 위한 2가지 메서드와 지오코딩 실행 방법에 영향을 미치는 추가 메서드를 제공했습니다. 반면, v3 Geocoder
객체는 geocode()
메서드만 제공합니다. 이 메서드는 입력어(Geocoding Requests 객체 형태)와 콜백 메서드를 포함하는 객체 리터럴만 취합니다. 요청에 텍스트 address
특성이나 LatLng
객체가 포함되어 있는지에 따라 Google Maps 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');
}
길찾기
Google Maps JavaScript API v3는 길찾기 계산 시 v2의 GDirections
클래스를 DirectionsService
클래스로 대체합니다.
v3의 route()
메서드는 v2 API의 load()
과 loadFromWaypoints()
메서드를 모두 대체합니다. 이 메서드는 입력어와 콜백 메서드가 포함된 하나의 DirectionsRequest
객체를 취하고 응답을 받는 즉시 실행합니다. v2의 GDirectionsOptions
객체와 마찬가지로 이 객체 리터럴은 옵션을 지정할 수 있습니다.
Google 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 directionsDisplay;
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);
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setPanel(document.getElementById("route"));
directionsDisplay.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
스트리트 뷰
Google 스트리트 뷰는 커버리지 영역에서 지정된 위치에서부터 대화형 360도 뷰를 제공합니다. 스트리트 뷰 이미지를 표시하려면 Flash® 플러그인이 필요했던 v2와 달리 v3 API는 브라우저에서 자체적으로 스트리트 뷰를 지원합니다.
스트리트 뷰 이미지는 v3에서는 StreetViewPanorama
객체를, v2에서는 GStreetviewPanorama
객체를 사용하여 지원됩니다. 이러한 클래스는 인터페이스는 달라도 같은 역할을 합니다. div
컨테이너를 스트리트 뷰 이미지와 연결하여 스트리트 뷰 파노라마의 위치와 POV(point of view)를 지정할 수 있게 해줍니다.
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);
}