เริ่มเลย

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

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

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

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

รับคีย์ 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'
    });

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

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

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

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