เริ่มใช้งาน

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

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

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

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

รับคีย์ API

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

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

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

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

ซึ่งต้องใช้รหัสแผนที่ที่คุณเพิ่งสร้าง คุณดูรหัสแผนที่ได้ในหน้าการจัดการ 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.
  }
});

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

เพิ่มมาร์กเกอร์ลงในแผนที่