เริ่มใช้งาน

ทําตามขั้นตอนต่อไปนี้เพื่อตั้งค่าเครื่องหมายขั้นสูง

รับคีย์ API และเปิดใช้ Maps JavaScript API

ก่อนใช้เครื่องหมายขั้นสูง คุณต้องมีโปรเจ็กต์ Cloud ที่มีบัญชีการเรียกเก็บเงิน และเปิดใช้ Maps JavaScript API ดูข้อมูลเพิ่มเติมได้ที่ตั้งค่าโปรเจ็กต์ Google Cloud

รับคีย์ API

สร้างรหัสแผนที่

หากต้องการสร้างรหัสแผนที่ใหม่ ให้ทําตามขั้นตอนในการปรับแต่งระบบคลาวด์ ตั้งค่าประเภทแผนที่เป็น JavaScript แล้วเลือกตัวเลือก Vector หรือ Raster

อัปเดตโค้ดการเริ่มต้นแผนที่

ซึ่งต้องใช้รหัสแผนที่ที่คุณเพิ่งสร้าง ซึ่งดูได้ในหน้าการจัดการ Maps

1. โหลด Maps JavaScript API

2. โหลดคลังเครื่องหมายขั้นสูงจากภายในasync ฟังก์ชันเมื่อจำเป็น

   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

3. ระบุรหัสแผนที่เมื่อสร้างอินสแตนซ์แผนที่โดยใช้พร็อพเพอร์ตี้ mapId ซึ่งอาจเป็นรหัสแผนที่ที่คุณระบุหรือ DEMO_MAP_ID

   const map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'YOUR_MAP_ID'
   });

ตรวจสอบความสามารถของแผนที่ (ไม่บังคับ)

เครื่องหมายขั้นสูงต้องใช้รหัสแผนที่ หากไม่มีรหัสแผนที่ ระบบจะโหลดเครื่องหมายขั้นสูงไม่ได้ ในขั้นตอนการแก้ปัญหา คุณสามารถเพิ่มmapcapabilities_changed Listener เพื่อติดตามการเปลี่ยนแปลงความสามารถของแผนที่ได้ การใช้ความสามารถของแผนที่เป็นตัวเลือกและแนะนําสําหรับการทดสอบและการแก้ปัญหาเท่านั้น หรือสําหรับวัตถุประสงค์สำรองรันไทม์

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

ขั้นตอนถัดไป

สร้างเครื่องหมายขั้นสูงเริ่มต้น