시작하기

프로젝트에 로컬 컨텍스트 라이브러리를 추가하고, 초기화하고, 로컬 컨텍스트 지도뷰를 구성하려면 다음 단계를 따르세요.

필수 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;index.ts

자바스크립트

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;index.js

로컬 컨텍스트 데이터 로드 연기

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;
}