เริ่มต้นใช้งาน

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

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

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

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

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

เครื่องหมายขั้นสูงต้องมีรหัสแผนที่ หากไม่มีรหัสแผนที่ คุณจะไม่สามารถโหลดเครื่องหมายขั้นสูงได้ ขั้นตอนการแก้ปัญหาคือ คุณเพิ่ม 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.
  }
});

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

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