이 섹션에서는 LocalContextMapView 인스턴스에서 설정할 수 있는 옵션과 LocalContextMapView로 제한되는 내부 Map에 대해 설명합니다. 새 LocalContextMapView 인스턴스를 만들 때 최대 10개의 장소 유형 및 반환할 최대 장소 수(최대 24개)를 지정합니다. 내부 Map은 표준 Maps JavaScript API Map과 동일한 MapOptions를 모두 지원합니다.
로컬 컨텍스트 라이브러리가 초기화된 후 언제든지 로컬 컨텍스트 검색 속성을 업데이트할 수 있습니다. maxPlaceCount, placeTypePreferences, locationRestriction 또는 locationBias를 업데이트하면 새 검색이 자동으로 트리거될 수도 있습니다.
장소 유형 지정
로컬 컨텍스트 라이브러리에서 반환해야 하는 최대 10개의 장소 유형을 지정할 수 있습니다. 다음 예와 같이 placeTypePreferences 속성을 사용하고 하나 이상의 장소 유형을 전달하여 장소 유형을 지정하세요.
placeTypePreferences: ['restaurant', 'cafe']
장소 유형 가중치 부여
필요에 따라 지정된 각 유형에 상대적 가중치를 할당할 수 있으며 이렇게 하면 가중치 값이 더 큰 유형이 더 자주 표시됩니다. 가중치는 필요에 따라서만 사용해야 하는 선택적 고급 매개변수입니다. 이 매개변수를 생략하면 로컬 컨텍스트 라이브러리가 기본 가중치를 결정하며, 기본 가중치는 시간이 지남에 따라 변경되고 개선될 수도 있습니다.
weight 속성을 사용하여 각 속성에 상대적 가중치를 할당할 수 있습니다. 다음 예에서는 지정된 장소 유형에 가중치를 부여하여 primary_school에 비해 두 배 많은 restaurant 및 cafe 결과를 반환합니다.
placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]
결과는 특정 지역에 특정 장소 유형이 존재하는지에 따라 달라집니다. 예를 들어 해당 지역에 쇼핑몰이 없는 경우 shopping_mall에 가중치 10을 할당해도 효과가 없습니다.
최대 장소 수 설정
로컬 컨텍스트 라이브러리가 반환해야 하는 최대 장소 수(최대 24개)를 설정하려면 다음과 같이 maxPlaceCount 속성을 사용하세요.
maxPlaceCount: 12
위치 제한 설정
검색은 기본적으로 지도 표시 영역에 한정됩니다. 경계 집합을 지정하여 검색결과를 더 크거나 더 작은 영역으로 한정할 수 있습니다. 이렇게 하려면 LocalContextMapView의 locationRestriction 속성을 원하는 LatLngBounds로 설정하세요. 이 값은 지도 표시 영역보다 크거나 작을 수 있습니다.
예시
경로 사용 설정
지도에서 경로를 사용 설정하려면 LocalContextMapView의 directionsOptions 속성을 설정하고 출발지의 LatLng 객체 리터럴을 전달하세요(도착지는 현재 선택된 장소에 따라 결정됩니다). 출발지가 전달되지 않으면 경로가 사용 중지됩니다. 다음 예는 지도에서 도보 경로를 사용 설정하기 위해 출발지를 설정하는 방법을 보여줍니다.
directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},
지도 경계 및 확대/축소 수준으로 정의되는 지도 표시 영역의 크기는 지정된 출발지에서 반환할 수 있는 거리에 직접적인 영향을 줍니다. 예를 들어 표시 영역이 너비 100마일의 영역을 표시하도록 설정되어 있으면 출발지에서 최대 50마일 이내의 관심 장소가 표시될 수 있습니다. 앱에서 적절한 거리의 도보 경로를 반환하도록 하려면 다음 방법을 사용하세요.
- 더 낮은 확대/축소 수준(일반적으로 확대/축소 수준 16 미만)에서 도보 경로를 사용 중지합니다.
- 더 작은 경계 영역을 사용하여
locationRestriction을 정의합니다. 이렇게 하면 제한 지역 외부의 관심 장소가 표시되지 않습니다.
경로 출발지 변경
LocalContextMapView의 수명 주기 동안 언제든지 directionsOptions 속성의 값을 변경할 수 있습니다. 다음 예는 directionsOptions의 새 값을 설정하는 방법을 보여줍니다.
localContextMapView.directionsOptions = {
origin: {lat: 47.6532809, lng: -122.3512206},
};
또는
localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};
레이아웃 및 표시 여부 설정
LocalContextMapView의 placeChooserViewSetup 및 placeDetailsViewSetup 속성을 설정하여 장소 세부정보 뷰와 장소 선택기의 초기 레이아웃 위치와 표시 여부 옵션을 설정할 수 있습니다. 프로그래매틱 방식으로 장소 세부정보 뷰를 숨길 수도 있습니다.
장소 선택기 레이아웃 위치 설정
LocalContextMapView를 초기화할 때 장소 선택기의 레이아웃 위치를 설정할 수 있습니다. 레이아웃 위치는 문서 방향을 기준으로 하며 앱이 왼쪽에서 오른쪽(LTR) 방향인지 오른쪽에서 왼쪽(RTL) 방향인지에 따라 다릅니다.
장소 선택기에는 다음과 같은 세 가지 레이아웃 옵션이 있습니다.
INLINE_START는 콘텐츠 흐름의 시작 부분(LTR의 경우 지도 왼쪽, RTL의 경우 오른쪽)에 장소 선택기를 표시하도록 설정합니다.INLINE_END는 콘텐츠 흐름의 끝부분(LTR의 경우 지도 오른쪽, RTL의 경우 왼쪽)에 장소 선택기를 표시하도록 설정합니다.BLOCK_END는 페이지의 하단(LTR와 RTL의 경우 모두 동일함)에 장소 선택기를 표시하도록 설정합니다.
장소 선택기 위치를 INLINE_START 또는 INLINE_END로 설정하면 장소 세부정보 뷰의 위치를 항상 동일한 값으로 설정해야 합니다.
원하는 경우 정보 창에 표시되도록 장소 세부정보 뷰를 설정할 수 있습니다.
BLOCK_END의 경우 장소 세부정보 뷰 레이아웃 모드는 항상 INFO_WINDOW로 설정해야 합니다.
로컬 컨텍스트 라이브러리는 LocalContextMapView의 렌더링된 크기에 따라 장소 선택기 위치를 변경합니다. 기본적으로 더 큰 LocalContextMapView에서 장소 선택기는 콘텐츠 흐름의 시작 부분(LTR의 경우 지도 왼쪽, RTL의 오른쪽)에 표시됩니다. 작은 LocalContextMapView(예: 휴대기기)에서는 지도의 하단에 장소 선택기를 표시하도록 기본값이 변경되고 정보 창에 장소 세부정보가 표시됩니다. 브라우저 확대/축소 수준은 장소 선택기 위치가 측면과 하단 사이에서 이동하는 픽셀 크기에 영향을 미칩니다(기준점은 확대/축소 수준에 비례하여 증가).
함수 호출을 사용하여 장소 선택기의 기본 위치를 구성하는 것이 좋습니다. 이러한 값을 직접 선언하면 모든 반응형 레이아웃 변경사항이 재정의됩니다.
콘텐츠 흐름의 시작 부분에 장소 선택기 표시
장소 선택기가 콘텐츠 흐름의 시작 부분(LTR의 경우 지도 왼쪽, RTL의 경우 오른쪽)에 표시되도록 설정하려면 아래 예와 같이 placeChooserViewSetup 및 placeDetailsViewSetup의 경우 모두 position을 INLINE_START로 설정하세요.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
});
콘텐츠 흐름의 끝부분에 장소 선택기 표시
장소 선택기가 콘텐츠 흐름의 끝부분(LTR의 경우 오른쪽, RTL의 경우 왼쪽)에 표시되도록 설정하려면 아래 예와 같이 placeChooserViewSetup 및 placeDetailsViewSetup의 경우 모두 position을 INLINE_END로 설정하세요.
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의 layoutMode를 INFO_WINDOW로 설정하세요.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'BLOCK_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {layoutMode: 'INFO_WINDOW'};
}
},
});
장소 선택기 숨기기
장소 선택기는 기본적으로 표시됩니다. 장소 선택기를 숨기려면 다음 예와 같이 layoutMode를 HIDDEN으로 설정하세요.
placeChooserViewSetup: {layoutMode: 'HIDDEN'},
다음 예는 기본 위치가 BLOCK_END로 변경될 때 장소 선택기를 숨기는 방법을 보여줍니다.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
placeChooserViewSetup: ({defaultPosition}) => {
if (defaultPosition === 'BLOCK_END') {
return {layoutMode: 'HIDDEN'};
}
},
});
정보 창에 장소 세부정보 뷰 표시
장소 세부정보 뷰가 정보 창에 표시되도록 하려면 다음 예와 같이 layoutMode를 INFO_WINDOW로 설정하세요.
placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},
이 설정을 원하는 장소 선택기 위치(왼쪽, 오른쪽 또는 하단)와 함께 사용할 수 있습니다.
프로그래매틱 방식으로 장소 세부정보 뷰 숨기기
다음 예와 같이 LocalContextMapView 인스턴스에서 hidePlaceDetailsView()를 호출하여 프로그래매틱 방식으로 장소 세부정보 뷰를 숨길 수 있습니다.
localContextMapView.hidePlaceDetailsView()
기본적으로 지도를 클릭하면 장소 세부정보 뷰가 숨겨집니다. placeDetailsViewSetup의 hidesOnMapClick 옵션을 false로 설정하여 이 기본 동작을 방지할 수 있습니다.
// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: {hidesOnMapClick: false},
});
지도가 클릭된 때만 장소 세부정보 정보 창을 숨기기 위해 다음 예와 같이 hidesOnMapClick 값 설정을 조건부로 관리할 수 있습니다.
// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: ({defaultLayoutMode}) => {
return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
},
});
내부 Map 옵션 설정
LocalContextMapView 인스턴스가 있으면 내부 Map 인스턴스에 MapOptions를 설정할 수 있습니다. LocalContextMapView에 의해 포함된 Map은 표준 Maps JavaScript API 지도와 동일한 지도 옵션을 모두 지원합니다. 다음 예는 새 LocalContextMapView 인스턴스를 만들고 내부 Map에 옵션을 설정하는 방법을 보여줍니다.
// Instantiate LocalContextMapView.
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 12,
});
// Set inner map options.
localContextMapView.map.setOptions({
center: pos,
zoom: 14,
mapTypeId: 'satellite',
});
}