지원 중단됨: 기존 클라우드 스타일 지정은 2025년 3월에 지원 중단되고 사용 중지될 예정입니다. 이 시점에 기존 지도 스타일이 더 이상 작동하지 않을 수도 있습니다. 2025년 3월 이전에 새로운 클라우드 기반 지도 스타일 지정으로 업데이트하시기 바랍니다. 지원 중단에 대한 자세한 내용은 지원 중단을 참고하세요. 기존 스타일을 업데이트하려면 지도 스타일을 최신 버전으로 업데이트를 참고하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

기존 클라우드 스타일 지정의 예

이 페이지의 내용
샘플 사용해 보기

다음은 지도 ID를 사용하여 맞춤 스타일 지도를 로드하는 기본적인 예입니다. 이 경우 Maps JavaScript API는 지도가 로드될 때 지도 ID 8e0a97af9386fef를 참조하고 해당 지도 ID와 연결된 지도 스타일을 자동으로 적용합니다.

TypeScriptJavaScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

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

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;index.js

예 보기

샘플 사용해 보기

JSFiddle.net Google Cloud Shell