Google에서는 Google Maps API를 사용하는 서비스를 위해 기능을 계속 추가하고 발전하고 있습니다.

오늘은 아직 정식 출시되지 않은 베타 버전으로 만나보실 수있는 Google Maps API의 유용한 기능 소개해 드리려고합니다.

 

약속

지금까지의 Google Maps JavaScript API의 함수는 함수를 이용해서 동기를 맞출 수 있습니다. 하지만 베타 버전으로 함수들이 Promise를 사용하여 수정 되서 callback 함수를 사용하지 않고 그대로 동기를 맞출 수있게되었습니다.

promise로 사용할 경우 사용할 수있는 함수를 중첩해서 사용하지 않아도 되서 코드를 좀 더 깔끔하게 사용할 수 있습니다.

callback 함수 또한 계속 옵션으로 지원할 예정입니다.

 

promise를 지원하는 api 목록은 가변됩니다.

[테이블 id = 37 /]

 

Promise를 사용하기 Google Maps JavaScript API를 베타 버전으로 호출해야합니다.

<script async src="https://maps.googleapis.com/maps/api/js?v=beta&key=YOUR_API_KEY&callback=initMap">

</script>

 

Promise를 지원하지 않을 때까지만해도 같이 callback 함수로 동기화했습니다.

const callback = (results, status) => {      if (status === 'OK') {           console.log(results);      } else {           // handle this case      } }; elevationService.getElevationForLocation({locations}, callback);

하지만 베타 버전으로 지원은 Promise 기능을 이용하면 보장 함수 없이도 동기를 맞출 수있어 코드가 깔끔해집니다.

const response = await elevationService.getElevationForLocation({locations}); console.log(response.results);

 

Promise를 통해 처리도 할 수 있습니다.

elevationService.getElevationForLocation({locations}) .then((response) => { console.log(response.results); }) .catch((error) => { console.log(error); }); .finally(() => { console.log('done'); });

 

로컬 라이브러리 라이브러리

로컬 근처 라이브러리는지도에서 근처의 POI 정보를 마커로 표시하고 해당 장소들의 사진을 볼 수있는 UI 위젯을 제공합니다.

로컬 시나리오 위젯으로 검색된 장소의 마커는 아래와 같이 장소 유형별로 다르게 나타납니다.

 

위젯에서 장소 사진을 클릭하면 같이 해당 장소의 상세 정보창이 나타납니다.

● 장소 선택 이전

● 장소 선택시

 

로컬 문맥 위젯에서 검색 할 수있는 장소의 유형은 10 가지이며, 상세 내용은 이 링크 에서 확인할 수 있습니다.

출발지 좌표를 설정하면, 위젯에서 장소 사진 선택 시 도보로 이동할 수 있는 길찾기 정보가 나타납니다.

 

Local Context Library는 아래 방법으로 사용할 수 있습니다.

1. 자바스크립트 라이브러리 호출 URL을 아래와 같은 형식으로 변경합니다.

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&v=beta&libraries=localContext"></script>

 

2. google.maps.localContext.LocalContextMap View 객체를 먼저 설정하고, 해당 객체의 map 속성으로 지도를 로드합니다.

const localContextMapView = new google.maps.localContext.LocalContextMapView( {        element: document.getElementById("map"),        placeTypePreferences: [           { type: "restaurant" },           { type: "tourist_attraction" },        ],        maxPlaceCount: 24, }); map = localContextMapView.map; map.setOptions({        center: { lat: 51.507307, lng: -0.08114 },        zoom: 14, });

Local Context 위젯에서 설정 가능한 사항은 아래와 같습니다.

● 장소 유형

placeTypePreferences: ['restaurant', 'cafe']

● 장소 유형별 가중치

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

● 검색되는 장소의 개수(최대 24개)

maxPlaceCount: 12

● 선택된 장소로의 도보 길찾기 출발지 좌표

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

● 위젯 레이아웃

 

● 장소 재검색

localContextMapView.search();

● 이벤트

 

Local Context Library는 정식 출시되면 여행 서비스 업체에서 유용하게 활용할 것으로 예상됩니다.

 

 

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 케이스에 존재하는 다양한 제품군을 보유하고 있는 고객의 사례에 꼭 맞는  무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 각 케이스에 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며,  SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다. 감사합니다.

Powered by Froala Editor

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다