로컬 컨텍스트 지도 맞춤설정

이 예에서는 기본 지도에 맞춤 지도 스타일을 적용합니다. 이 지도에는 하와이의 와이키키가 표시되며 트로피컬 색 구성표로 스타일이 지정됩니다. 또한 더 많은 관심 장소를 표시하기 위해 maxPlaceCount를 18로 설정했습니다.

소스 코드 보기

TypeScript

let map: google.maps.Map;
const center = { lat: 21.27869, lng: -157.826347 };

const styles: google.maps.MapTypeStyle[] = [
  { elementType: "geometry", stylers: [{ color: "#efe6be" }] },
  { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
  {
    elementType: "labels.text.fill",
    stylers: [{ color: "#f5f5f5" }, { weight: 1.5 }],
  },
  {
    elementType: "labels.text.stroke",
    stylers: [{ color: "#9e9e9e" }, { weight: 1.5 }],
  },
  {
    featureType: "administrative.land_parcel",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "administrative.land_parcel",
    elementType: "labels.text.fill",
    stylers: [{ color: "#bdbdbd" }],
  },
  {
    featureType: "administrative.neighborhood",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "poi",
    elementType: "geometry",
    stylers: [{ color: "#c44135" }],
  },
  {
    featureType: "poi.park",
    elementType: "geometry",
    stylers: [{ color: "#328829" }],
  },
  {
    featureType: "poi.sports_complex",
    elementType: "geometry",
    stylers: [{ color: "#2ca37b" }],
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ color: "#e4b083" }],
  },
  {
    featureType: "road",
    elementType: "labels",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ color: "#32cbb1" }],
  },
  {
    featureType: "water",
    elementType: "labels.text",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "water",
    elementType: "labels.text.fill",
    stylers: [{ color: "#9e9e9e" }],
  },
];

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "bakery", weight: 1 },
      { type: "park", weight: 2 },
      { type: "restaurant", weight: 3 },
      { type: "shopping_mall", weight: 1 },
      { type: "tourist_attraction", weight: 3 },
    ],
    maxPlaceCount: 18,
    directionsOptions: { origin: center },
  });

  map = localContextMapView.map!;

  // Trigger hidePlaceDetailsView() with a click event handler on the inner map.
  map.addListener("click", () => {
    localContextMapView.hidePlaceDetailsView();
  });

  // Merge map styles.
  const mergedStyles = map.get("styles").concat(styles);

  map.setOptions({
    center: center,
    zoom: 14,
    styles: mergedStyles,
  });

  // Add a marker at the center point
  new google.maps.Marker({
    position: center,
    map: map,
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
    zIndex: 30,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

자바스크립트

let map;
const center = { lat: 21.27869, lng: -157.826347 };
const styles = [
  { elementType: "geometry", stylers: [{ color: "#efe6be" }] },
  { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
  {
    elementType: "labels.text.fill",
    stylers: [{ color: "#f5f5f5" }, { weight: 1.5 }],
  },
  {
    elementType: "labels.text.stroke",
    stylers: [{ color: "#9e9e9e" }, { weight: 1.5 }],
  },
  {
    featureType: "administrative.land_parcel",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "administrative.land_parcel",
    elementType: "labels.text.fill",
    stylers: [{ color: "#bdbdbd" }],
  },
  {
    featureType: "administrative.neighborhood",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "poi",
    elementType: "geometry",
    stylers: [{ color: "#c44135" }],
  },
  {
    featureType: "poi.park",
    elementType: "geometry",
    stylers: [{ color: "#328829" }],
  },
  {
    featureType: "poi.sports_complex",
    elementType: "geometry",
    stylers: [{ color: "#2ca37b" }],
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ color: "#e4b083" }],
  },
  {
    featureType: "road",
    elementType: "labels",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ color: "#32cbb1" }],
  },
  {
    featureType: "water",
    elementType: "labels.text",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "water",
    elementType: "labels.text.fill",
    stylers: [{ color: "#9e9e9e" }],
  },
];

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "bakery", weight: 1 },
      { type: "park", weight: 2 },
      { type: "restaurant", weight: 3 },
      { type: "shopping_mall", weight: 1 },
      { type: "tourist_attraction", weight: 3 },
    ],
    maxPlaceCount: 18,
    directionsOptions: { origin: center },
  });

  map = localContextMapView.map;
  // Trigger hidePlaceDetailsView() with a click event handler on the inner map.
  map.addListener("click", () => {
    localContextMapView.hidePlaceDetailsView();
  });

  // Merge map styles.
  const mergedStyles = map.get("styles").concat(styles);

  map.setOptions({
    center: center,
    zoom: 14,
    styles: mergedStyles,
  });
  // Add a marker at the center point
  new google.maps.Marker({
    position: center,
    map: map,
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
    zIndex: 30,
  });
}

window.initMap = initMap;index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Local Context Styles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
  </body>
</html>index.html

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

코드 이해하기

기본 지도 액세스

기본 지도는 google.maps.localContext.LocalContextMapView 객체의 map 속성으로 액세스할 수 있습니다. 이 지도는 일반 google.maps.Map 객체이며 해당 클래스에 사용할 수 있는 모든 매개변수와 메서드를 사용하여 맞춤설정할 수 있습니다. 예를 들어 맞춤 마커와 이벤트 리스너를 추가할 수 있습니다.

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});

localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

맞춤 스타일 적용

google.maps.localContext.LocalContextMapView.map의 기본 스타일은 표준 Map과 다르기 때문에 기본값을 재정의하거나 맞춤 스타일을 로컬 컨텍스트 라이브러리 기본값과 병합할 수 있습니다. 자세한 내용은 지도 스타일 지정을 참고하세요.

LocalContextMapView 기본 스타일을 기반으로 맞춤 스타일(stylesArray)을 만드는 방법은 다음과 같습니다.

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});index.ts

자바스크립트

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});index.js

맞춤 마커 추가

이 예에서는 호텔 아이콘을 사용하여 중심점과 빨간색 기본 핀 마커를 구별합니다. Marker의 label 및 icon 속성을 수정하여 마커를 맞춤설정하는 방법을 자세히 알아보세요.

기본적으로 이러한 마커는 로컬 컨텍스트 라이브러리 관심 장소 마커 아래에 표시됩니다. 로컬 컨텍스트 라이브러리 마커가 맞춤 마커를 가리지 않도록 하려면 마커의 zIndex 속성을 maxPlaceCount보다 높은 값으로 설정하세요.

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});index.ts

자바스크립트

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});index.js

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell