Local Context로 간단한 장소 위젯 나타내기
2020-07-02
새로운 기능인 Local Context는 현재 베타 버전으로 나온 기능으로, 사용자가 지정한 위치 주변의 주요 장소 정보를 유형별로 제공하는 Maps JavaScript API의 새로운 라이브러리입니다.
Local Context 라이브러리를 사용하면 지도가 로드될 때 주요 장소를 마커로 표시하고, 해당 장소들의 사진으로 구성된 위젯이 추가됩니다. 각 사진을 클릭하면 해당 선택된 장소에 대한 상세 정보가 제공됩니다.
Local Context 기본 예제
Local Context를 사용하기 위해서는 우선 Maps JavaScript API와 Places API를 사용 설정해야합니다.
아래는 시애틀의 레스토랑(restaurant)과 병원(hospital)의 정보를 Local Context으로 출력하는 스크립트 코드입니다.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector(‘#map‘),
placeTypePreferences: [‘restaurant‘, ‘hospital‘],
maxPlaceCount: 24,
});
// Set inner map options.
localContextMapView.map.setOptions({
center: {lat: 47.6532809, lng: –122.3512206},
zoom: 10.5
});
placeTypePreferences로 최대 10개 까지의 장소 유형을, maxPlaceCount로 최소 1개부터 24개까지의 장소를 지도에 표시할 수 있습니다.
부가적으로 locationRestriction 옵션을 사용하시면 기본 뷰포트가 아닌 원하시는 범위로 장소를 나타낼 범위를 지정할 수 있습니다.
위젯 위치
Local Context는 기본적으로 웹 화면에서 왼쪽에 위젯이 위치합니다.
위젯을 오른쪽에 있도록 설정하고 싶으시다면 아래의 옵션을 추가해주시면 됩니다.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// …
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === ‘SHEET’) {
return {position: ‘INLINE_END‘};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === ‘SHEET’) {
return {position: ‘INLINE_END’‘};
}
},
});
위젯을 하단에 위치하게 하고 싶으시다면 placeChooserViewSetup의 position을 ‘BLOCK_END’로, placeDetailsViewSetup의 position을 ‘INFO_WINDOW’로 설정하면 됩니다.
또한, Local Context는 휴대 기기와 같은 곳에서는 보기 편하게 위젯을 자동으로 다르게 배치해 보여줍니다.
웹과 다르게 휴대용 기기에서는 위젯을 하단에 배치하고 정보를 infoWindow로 간단하게 보여주는 것을 확인할 수 있습니다.
길 찾기
Local Context는 지정한 좌표에서부터 사용자가 위젯에서 선택한 장소까지의 도보 경로와 걸리는 시간을 표시할 수 있는 길 찾기 옵션이 있습니다.
길 찾기 옵션인 directionsOptions은 localContext를 처음 설정할 때 아래 옵션을 추가하면 됩니다.
directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}}
길 찾기 출발지는 아래의 두 가지 방법으로 수정할 수 있습니다.
localContextMapView.directionsOptions = {
origin: {lat: 47.6532809, lng: -122.3512206},
};
localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};
Local Context에는 그 밖에도 다른 여러 가지 옵션과 기능을 지정할 수 있습니다.
자세한 설정 방법과 부가적인 기능들은 Local Context의 공식 문서를 참고 하시길 바랍니다.
SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 케이스에 존재하는 다양한 제품군을 보유하고 있는 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 각 케이스에 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다. 감사합니다.
Powered by Froala Editor
SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다
