เริ่มเลย

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

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

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

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