เริ่มใช้งาน

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

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

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

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

รับคีย์ API

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

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

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

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

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

  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'
});

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

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

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

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

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