ตัวอย่างการจัดรูปแบบระบบคลาวด์เดิม

นี่เป็นตัวอย่างพื้นฐานของการโหลดแผนที่ที่มีสไตล์ที่กำหนดเองโดยใช้รหัสแผนที่ ในกรณีนี้ JavaScript ของ Maps จะอ้างอิงรหัสแผนที่ 8e0a97af9386fef เมื่อโหลดแผนที่ และจะใช้รูปแบบแผนที่ที่เชื่อมโยงกับรหัสแผนที่นั้นโดยอัตโนมัติ

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง