LocalContextMapView로 지도 이전

로컬 컨텍스트 라이브러리를 사용하도록 기존 Maps JavaScript API 구현을 이전하려면 다음 단계를 따르세요.

  1. LocalContextMapView 인스턴스를 만들고 이 인스턴스를 사용하여 내부 Map에 액세스합니다.
  2. libraries=localContext 및 v=beta 매개변수를 포함하도록 script 태그를 업데이트합니다.
  3. 이전 google.maps.Map 선언을 삭제합니다.
  4. 맞춤 지도 스타일을 로컬 컨텍스트 지도 스타일과 병합합니다. 맞춤 지도 스타일을 정의하지 않은 경우 이 단계를 건너뛸 수 있습니다.

현재 Maps JavaScript API 코드는 다음과 같습니다.

const map = new google.maps.Map(
  document.querySelector('#map-container'),
  /* map options */
);

로컬 컨텍스트 라이브러리로 이전하려면 이전 코드를 다음 코드로 바꾸세요.

// Create a new LocalContextMapView instance.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.querySelector('#map-container'),
  placeTypePreferences: ['restaurant', 'cafe'],
  maxPlaceCount: 12,
});

// Access the inner map and set map options.
const map = localContextMapView.map;
map.setOptions(/* map options */);

libraries=localContext 및 v=beta 매개변수를 포함하도록 script 태그를 업데이트합니다.

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

맞춤 스타일을 정의한 경우 로컬 컨텍스트 라이브러리 지도 스타일과 병합해야 합니다. 자세히 알아보기