เริ่มใช้งาน

เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

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

รับคีย์ API

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

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

สร้างรหัสแผนที่เวกเตอร์

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

โดยต้องใช้รหัสแผนที่ที่คุณเพิ่งสร้าง โดยจะอยู่ในหน้าการจัดการ 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 เพื่อติดตามการเปลี่ยนแปลง ความสามารถของแผนที่ได้ การใช้ความสามารถของ Maps เป็นตัวเลือก และขอแนะนำให้ใช้เพื่อการทดสอบ และการแก้ปัญหาเท่านั้น หรือเพื่อวัตถุประสงค์ในการย้อนกลับรันไทม์

// 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.
  }
});

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

เพิ่มเครื่องหมายลงในแผนที่