프로젝트에 로컬 컨텍스트 라이브러리를 추가하고, 초기화하고, 로컬 컨텍스트 지도뷰를 구성하려면 다음 단계를 따르세요.
필수 API 및 SDK 사용 설정
로컬 컨텍스트 라이브러리를 사용하려면 Maps JavaScript API와 Places API를 사용 설정해야 합니다. 이렇게 하려면 안내에 따라 하나 이상의 API 또는 SDK를 사용 설정하세요. 두 API 모두 Google Cloud 콘솔의 동일한 프로젝트에서 사용 설정해야 합니다.
로컬 컨텍스트 라이브러리 로드
로컬 컨텍스트 라이브러리를 로드하려면 평소와 같이 Maps JavaScript API를 로드하고 다음 매개변수를 포함하세요.
libraries=localContext
는 로컬 컨텍스트 라이브러리를 로드합니다.v=beta
는 이 버전을 사용하기 위해 필요합니다.key
에는 API 키가 포함됩니다.callback
은initMap()
함수를 실행합니다.
다음 예는 앞서 언급한 모든 옵션이 포함된 스크립트 태그를 보여줍니다.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext&v=beta&callback=initMap">
</script>
새 로컬 컨텍스트 지도뷰 만들기
로컬 컨텍스트 라이브러리를 웹페이지에 추가하려면 먼저 LocalContextMapView
인스턴스를 만들고 원하는 속성을 설정하세요.
element
- 지도를 표시해야 하는div
요소(이 경우 이름이 'map'으로 지정됩니다).placeTypePreferences
- 로컬 컨텍스트 라이브러리에서 반환해야 하는 장소 유형(최대 10개)maxPlaceCount
- 표시할 최대 장소 수(1~24)locationRestriction
(선택사항) - 장소 검색을 특정 위치로 제한합니다. 기본값은 지도 표시 영역입니다.
LocalContextMapView
인스턴스가 있으면 내부 Map
인스턴스에 지도 옵션을 설정할 수 있습니다. LocalContextMapView
에 의해 포함된 지도는 표준 Maps JavaScript API 지도와 동일한 지도 옵션을 모두 지원합니다. 다음 예는 새 LocalContextMapView
인스턴스를 만들고 내부 Map
에 옵션을 설정하는 방법을 보여줍니다.
TypeScript
let map: google.maps.Map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [ { type: "restaurant" }, { type: "tourist_attraction" }, ], maxPlaceCount: 12, }); map = localContextMapView.map!; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
자바스크립트
let map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [ { type: "restaurant" }, { type: "tourist_attraction" }, ], maxPlaceCount: 12, }); map = localContextMapView.map; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); } window.initMap = initMap;
로컬 컨텍스트 데이터 로드 연기
LocalContextMapView
maxPlaceCount
옵션을 0으로 설정하여 초기화 시 로컬 컨텍스트 데이터 로드를 연기할 수 있습니다. 이 방법은 사용자가 데이터를 볼 준비가 될 때까지 기다려야 하는 경우 유용합니다. 로컬 컨텍스트 데이터를 로드할 준비가 되면 maxPlaceCount
를 1 이상의 값으로 설정합니다. 다음 예는 로컬 컨텍스트 데이터를 로드하지 않고 지도를 초기화한 다음 maxPlaceCount
를 설정하여 데이터를 로드하는 방법을 보여줍니다.
// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
});
//...
// Show places now.
localContextMapView.maxPlaceCount = 12;
로컬 컨텍스트 UI 표시 전환
LocalContextMapView
maxPlaceCount
옵션을 0으로 설정하여 로컬 컨텍스트 사용자 인터페이스 요소를 전환할 수 있습니다. 로컬 컨텍스트 사용자 인터페이스를 다시 표시하려면 maxPlaceCount
를 1 이상의 값으로 설정하세요.
최소 지도 크기 설정
로컬 컨텍스트 라이브러리는 렌더링된 LocalContextMapView
크기에 따라 표시를 변경합니다. 지원되는 최소 LocalContextMapView
크기는 다음과 같습니다.
- 300x480픽셀(세로 모드)
- 480x380픽셀(가로 모드)
LocalContextMapView
에 포함된 요소가 지원되는 최소 크기보다 작으면 장소 선택기, 관심 장소 등 로컬 컨텍스트 라이브러리 요소가 표시되지 않습니다.
브라우저 확대/축소 수준은 지원되는 최소 크기에 영향을 미칩니다. 예를 들어 브라우저 창이 200%로 확대되면 지원되는 최소 크기는 600x 960(세로 모드), 960x760(가로 모드)이 됩니다.
CSS 권장사항
로컬 컨텍스트 라이브러리 DOM의 CSS 클래스는 공개 API의 일부가 아니며 로컬 컨텍스트 라이브러리 DOM 내에서 요소의 스타일을 지정하거나 요소를 수정하거나 선택할 수 없습니다. DOM 스타일 지정 충돌을 피하고 로컬 컨텍스트 라이브러리 지도뷰가 제대로 표시되도록 하려면 다음 가이드라인을 따르는 것이 좋습니다.
- 로컬 컨텍스트 라이브러리 CSS 클래스는 예고 없이 변경될 수 있으므로 사용하지 마세요.
- 로컬 컨텍스트 라이브러리 DOM 내에서 요소의 스타일을 지정하거나 요소를 수정하거나 선택하지 마세요.
요소를 수정하는 CSS 프레임워크를 사용하면 스타일 지정 충돌 문제를 해결할 수도 있습니다.
예를 들어 전체 페이지 box-sizing
을 border-box
로 변경하려면 다음 안내를 따르세요.
<html>
요소를border-box
로 설정하는box-sizing
재정의를 사용합니다.- 로컬 컨텍스트 라이브러리 지도뷰가 포함된 요소에
box-sizing: initial
을 사용합니다. - 다른 모든 요소에는
box-sizing: inherit
를 사용합니다.
이렇게 하면 로컬 컨텍스트 라이브러리 DOM에서 box-sizing
이 낮은 특이도 선택기가 있는 표준 기본값으로 재설정됩니다.
코드는 다음과 같이 표시됩니다.
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.container-for-google-maps {
box-sizing: initial;
}