เริ่มใช้งาน

เลือกแพลตฟอร์ม 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'
});

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

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

// 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.
  }
});

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

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