เริ่มต้น

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

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

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

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

รับคีย์ API

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

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

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

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

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

ข้อควรระวัง: ตัวอย่างแผนที่สำหรับเครื่องหมายขั้นสูงใช้รหัสแผนที่ซึ่งลิงก์กับรูปแบบแผนที่ที่มีการลดจุดที่น่าสนใจ หากนำโค้ดตัวอย่างมาใช้ซ้ำ เราขอแนะนำให้แทนที่รหัสแผนที่เหล่านี้ด้วย DEMO_MAP_ID หรือรหัสแผนที่ของคุณเอง

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

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

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

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