กิจกรรม

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

หน้านี้จะอธิบายถึงเหตุการณ์ของอินเทอร์เฟซผู้ใช้และเหตุการณ์ข้อผิดพลาดที่คุณสามารถติดตามและจัดการได้ แบบเป็นโปรแกรม

เหตุการณ์อินเทอร์เฟซผู้ใช้

JavaScript ภายในเบราว์เซอร์ขับเคลื่อนด้วยเหตุการณ์ ซึ่งหมายความว่า JavaScript ตอบสนองต่อการโต้ตอบด้วยการสร้างกิจกรรมและคาดหวังว่า โปรแกรมเพื่อฟังกิจกรรมที่น่าสนใจ มี 2 ประเภท ได้แก่ กิจกรรม:

• เหตุการณ์ของผู้ใช้ (เช่น เหตุการณ์ "คลิก" เกี่ยวกับเมาส์) เผยแพร่จาก DOM ไปยัง Maps JavaScript API เหตุการณ์เหล่านี้แยกต่างหากและต่างจาก เหตุการณ์ DOM มาตรฐาน
• การแจ้งเตือนการเปลี่ยนแปลงสถานะ MVC จะแสดงการเปลี่ยนแปลงใน Maps JavaScript API และตั้งชื่อโดยใช้แบบแผน property_changed

ออบเจ็กต์ Maps JavaScript API แต่ละรายการจะส่งออกเหตุการณ์ที่ตั้งชื่อไว้จำนวนหนึ่ง โปรแกรมที่สนใจเหตุการณ์บางอย่างจะลงทะเบียน Listener เหตุการณ์ของ JavaScript สำหรับเหตุการณ์เหล่านั้น และเรียกใช้โค้ดเมื่อได้รับเหตุการณ์ การเรียกใช้ addListener() เพื่อลงทะเบียนเครื่องจัดการเหตุการณ์บนออบเจ็กต์

ตัวอย่างต่อไปนี้จะแสดงเหตุการณ์ที่มีการทริกเกอร์โดย google.maps.Map ขณะที่คุณโต้ตอบกับแผนที่

ดูรายการเหตุการณ์ทั้งหมดได้ที่ ข้อมูลอ้างอิงของ Maps JavaScript API เหตุการณ์จะแสดงในส่วนที่แยกต่างหากสำหรับแต่ละออบเจ็กต์ที่มีเหตุการณ์

เหตุการณ์ UI

ออบเจ็กต์บางอย่างใน Maps JavaScript API ออกแบบมาเพื่อตอบสนอง เหตุการณ์ของผู้ใช้ เช่น เหตุการณ์ด้วยเมาส์หรือแป้นพิมพ์ เช่น ผู้ใช้เหล่านี้บางส่วน เหตุการณ์ที่ออบเจ็กต์ google.maps.marker.AdvancedMarkerElement รับฟังได้

• 'click'
• 'drag'
• 'dragend'
• 'dragstart'
• 'gmp-click'

สำหรับรายการทั้งหมด ให้ดูที่ AdvancedMarkerElement เหตุการณ์เหล่านี้อาจดูเหมือนเหตุการณ์ DOM มาตรฐาน แต่จริงๆ แล้วเหตุการณ์เหล่านี้เป็นส่วนหนึ่ง ของ Maps JavaScript API เนื่องจากเบราว์เซอร์ที่ต่างกัน ติดตั้งใช้งานเหตุการณ์ DOM รูปแบบต่างๆ เช่น Maps JavaScript API ให้กลไกเหล่านี้ในการฟังและตอบสนองต่อเหตุการณ์ DOM โดยไม่ต้อง จัดการความผิดปกติหลายอย่างในเบราว์เซอร์ต่างๆ เหตุการณ์เหล่านี้มักจะส่งผ่านอาร์กิวเมนต์ ภายในเหตุการณ์โดยระบุสถานะ UI บางอย่าง (เช่น ตำแหน่งเมาส์)

การเปลี่ยนแปลงสถานะ MVC

โดยปกติออบเจ็กต์ MVC จะมีสถานะ เมื่อใดก็ตามที่คุณสมบัติของออบเจ็กต์เปลี่ยนแปลง Maps JavaScript API จะเริ่มทํางานในกรณีที่พร็อพเพอร์ตี้มีการเปลี่ยนแปลง ตัวอย่างเช่น API จะทำให้เหตุการณ์ zoom_changed เริ่มทำงานบนแผนที่เมื่อการซูมของแผนที่ การเปลี่ยนแปลงระดับ คุณสามารถสกัดกั้นการเปลี่ยนแปลงสถานะเหล่านี้ได้โดยโทร addListener() เพื่อลงทะเบียนตัวแฮนเดิลเหตุการณ์บนออบเจ็กต์ด้วย

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

จัดการเหตุการณ์

ใช้ addListener() เพื่อลงทะเบียนรับการแจ้งเตือนกิจกรรม เครื่องจัดการเหตุการณ์ เมธอดดังกล่าวจะรับเหตุการณ์เพื่อตรวจจับ และ เพื่อเรียกเมื่อเกิดเหตุการณ์ที่ระบุ

ตัวอย่าง: เหตุการณ์บนแผนที่และเครื่องหมาย

โค้ดต่อไปนี้จะรวมเหตุการณ์ของผู้ใช้กับเหตุการณ์การเปลี่ยนแปลงสถานะ เราได้แนบไฟล์ ตัวแฮนเดิลเหตุการณ์เป็นเครื่องหมายที่ซูมแผนที่เมื่อคลิก เรายังเพิ่ม เครื่องจัดการเหตุการณ์ไปยังแผนที่สำหรับการเปลี่ยนแปลงพร็อพเพอร์ตี้ center และ เลื่อนแผนที่กลับไปที่เครื่องหมายหลังจาก 3 วินาทีหลังจากได้รับ center_changed เหตุการณ์:

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const myLatlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatlng,
      mapId: "DEMO_MAP_ID",
    }
  );

  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position as google.maps.LatLng);
    }, 3000);
  });

  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position as google.maps.LatLng);
  });
}

initMap();
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
    mapId: "DEMO_MAP_ID",
  });
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position);
    }, 3000);
  });
  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position);
  });
}

initMap();
index.js

หมายเหตุ: JavaScript รวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net Google Cloud Shell

เคล็ดลับ: หากพยายามตรวจหาการเปลี่ยนแปลงใน วิวพอร์ต อย่าลืมใช้เหตุการณ์ bounds_changed ที่เจาะจง แทนที่จะเป็นร่างกฎหมาย zoom_changed และ center_changed กิจกรรม เนื่องจาก Maps JavaScript API ทำให้เหตุการณ์หลังเหล่านี้เริ่มทำงานอย่างอิสระ getBounds() อาจไม่รายงานผลลัพธ์ที่เป็นประโยชน์ จนกว่าวิวพอร์ตจะค่อยๆ มีการเปลี่ยนแปลง หากคุณต้องการ getBounds()หลังจากเกิดเหตุการณ์ดังกล่าว อย่าลืมฟัง bounds_changed แทน

ตัวอย่าง: การแก้ไขรูปร่างและการลากเหตุการณ์

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

มุมมอง ตัวอย่าง (rectangle-event.html)

อาร์กิวเมนต์การเข้าถึงในเหตุการณ์ UI

เหตุการณ์ UI ภายใน Maps JavaScript API มักจะส่งผ่านอาร์กิวเมนต์เหตุการณ์ ซึ่งสามารถเข้าถึงได้โดย Listener เหตุการณ์ โดยจะสังเกตสถานะ UI เมื่อ เกิดเหตุการณ์ เช่น โดยทั่วไปเหตุการณ์ 'click' ของ UI มักจะผ่าน MouseEvent ที่มีพร็อพเพอร์ตี้ latLng ซึ่งแสดงถึง ตำแหน่งที่คลิกบนแผนที่ โปรดทราบว่าลักษณะการทำงานนี้จะไม่ซ้ำกันใน UI กิจกรรม การเปลี่ยนแปลงสถานะ MVC จะไม่ส่งผ่านอาร์กิวเมนต์ในเหตุการณ์

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

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
      mapId: "DEMO_MAP_ID",
    }
  );

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng, map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.js

หมายเหตุ: JavaScript รวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net Google Cloud Shell

ใช้การปิดใน Listener เหตุการณ์

เมื่อใช้งาน Listener เหตุการณ์ การมีทั้ง 2 อย่างจะเป็นประโยชน์ มีข้อมูลส่วนตัวและข้อมูลถาวรแนบอยู่กับออบเจ็กต์ JavaScript ไม่ สนับสนุน "ส่วนตัว" ข้อมูลอินสแตนซ์ แต่รองรับ closure ซึ่งทำให้ฟังก์ชันภายในเข้าถึงฟังก์ชันภายนอกได้ ตัวแปร การปิดมีประโยชน์ภายใน Listener เหตุการณ์เพื่อเข้าถึงตัวแปรที่ไม่ใช่ โดยปกติแล้วจะแนบอยู่กับออบเจ็กต์ที่เกิดเหตุการณ์ขึ้น

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

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
      mapId: "DEMO_MAP_ID",
    }
  );

  const bounds: google.maps.LatLngBoundsLiteral = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(
  marker: google.maps.marker.AdvancedMarkerElement,
  secretMessage: string
) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });
  const bounds = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.js

หมายเหตุ: JavaScript รวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net Google Cloud Shell

รับและตั้งค่าพร็อพเพอร์ตี้ภายในเครื่องจัดการกิจกรรม

ไม่มีเหตุการณ์การเปลี่ยนแปลงสถานะ MVC ในบัตรเหตุการณ์ JavaScript API ของ Maps อาร์กิวเมนต์เมื่อมีการทริกเกอร์เหตุการณ์ (เหตุการณ์ของผู้ใช้ ผ่านอาร์กิวเมนต์ซึ่งตรวจสอบได้) หากต้องการตรวจสอบพร็อพเพอร์ตี้ ในการเปลี่ยนสถานะ MVC คุณควรเรียกใช้ฟิลด์ getProperty() ในออบเจ็กต์นั้น ช่วงเวลานี้ การตรวจสอบจะเรียกสถานะปัจจุบันของ MVC เสมอ ซึ่งอาจไม่ใช่สถานะที่เหตุการณ์เริ่มทำงานครั้งแรก

หมายเหตุ: การตั้งค่าพร็อพเพอร์ตี้ภายใน เครื่องจัดการเหตุการณ์ที่ตอบสนองต่อการเปลี่ยนแปลงสถานะของ พร็อพเพอร์ตี้อาจทำให้เกิดลักษณะการทำงานที่คาดเดาไม่ได้และ/หรือไม่พึงประสงค์ การเกริ่นนำ เช่น พร็อพเพอร์ตี้ดังกล่าวจะทริกเกอร์เหตุการณ์ใหม่ ตั้งค่าพร็อพเพอร์ตี้ภายในเครื่องจัดการเหตุการณ์นี้ได้ในที่สุด คุณอาจสร้าง วนซ้ำได้ไม่รู้จบ

ในตัวอย่างด้านล่าง เราตั้งค่าเครื่องจัดการเหตุการณ์ให้ตอบสนองต่อ ขยายเหตุการณ์โดยแสดงหน้าต่างข้อมูลที่แสดงระดับดังกล่าว

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: originalMapCenter,
    }
  );

  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);

  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom()!);
  });
}

initMap();
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: originalMapCenter,
  });
  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);
  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom());
  });
}

initMap();
index.js

หมายเหตุ: JavaScript รวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net Google Cloud Shell

ฟังเหตุการณ์ DOM

โมเดลเหตุการณ์ของ Maps JavaScript API จะสร้างและจัดการโมเดลของตัวเอง เหตุการณ์ที่กำหนดเอง แต่ DOM (Document Object Model) ภายในเบราว์เซอร์ ยังสร้างและจัดการเหตุการณ์ของตนเอง โดยอิงตาม รูปแบบเหตุการณ์ของเบราว์เซอร์ที่ใช้อยู่ หากคุณต้องการจับภาพและตอบสนองกับ Maps JavaScript API จะให้ addDomListener() เมธอดแบบคงที่เพื่อฟังและเชื่อมโยงกับเหตุการณ์ DOM

วิธีอำนวยความสะดวกนี้มีลายเซ็นตามที่แสดงด้านล่าง

addDomListener(instance:Object, eventName:string, handler:Function)

โดยที่ instance อาจเป็นองค์ประกอบ DOM ใดๆ ที่เบราว์เซอร์รองรับ ซึ่งรวมถึง

• สมาชิกแบบลำดับชั้นของ DOM เช่น window หรือ วันที่ document.body.myform
• องค์ประกอบที่มีชื่อ เช่น document.getElementById("foo")

โปรดทราบว่า addDomListener() ผ่านเหตุการณ์ที่ระบุ ให้กับเบราว์เซอร์ ซึ่งจะจัดการตามโมเดลเหตุการณ์ DOM ของเบราว์เซอร์ อย่างไรก็ตาม เบราว์เซอร์สมัยใหม่เกือบทั้งหมดสนับสนุน DOM ระดับ 2 เป็นอย่างน้อย (สำหรับข้อมูลเพิ่มเติม ข้อมูลเกี่ยวกับเหตุการณ์ระดับ DOM โปรดดู ระดับ Mozilla DOM reference.)

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const mapDiv = document.getElementById("map") as HTMLElement;
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const mapDiv = document.getElementById("map");
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.js

หมายเหตุ: JavaScript รวบรวมจากข้อมูลโค้ด TypeScript

HTML

<html>
  <head>
    <title>Listening to DOM Events</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net Google Cloud Shell

แม้ว่าโค้ดด้านบนจะเป็นโค้ด Maps JavaScript API แต่ เมธอด addDomListener() เชื่อมโยงกับออบเจ็กต์ window ของเบราว์เซอร์และอนุญาตให้ API สื่อสารกับออบเจ็กต์ภายนอก โดเมนปกติของ API

นำ Listener เหตุการณ์ออก

ในการนำ Listener เหตุการณ์ออกที่เฉพาะเจาะจง ต้องกำหนด Listener เหตุการณ์ให้กับ ตัวแปร จากนั้นคุณสามารถโทรไปที่ removeListener() ส่งผ่านชื่อตัวแปรที่กำหนด Listener ไปให้

var listener1 = marker.addListener('click', aFunction);

google.maps.event.removeListener(listener1);

ในการนำ Listener ทั้งหมดออกจากอินสแตนซ์หนึ่งๆ ให้เรียกใช้ clearInstanceListeners() กำลังส่งชื่ออินสแตนซ์

var listener1 = marker.addListener('click', aFunction);
var listener2 = marker.addListener('mouseover', bFunction);

// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);

หากต้องการนำ Listener ทั้งหมดออกสำหรับประเภทเหตุการณ์ที่เฉพาะเจาะจงสำหรับอินสแตนซ์ที่เจาะจง ให้ทำดังนี้ เรียก clearListeners() การส่งชื่ออินสแตนซ์และเหตุการณ์ ชื่อ

marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);

// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');

ดูข้อมูลเพิ่มเติมได้ในเอกสารอ้างอิงสำหรับ google.maps.event Namespace

ตรวจหาข้อผิดพลาดในการตรวจสอบสิทธิ์

หากต้องการตรวจหาความล้มเหลวในการตรวจสอบสิทธิ์แบบเป็นโปรแกรม (ตัวอย่างเช่น เพื่อส่งบีคอนโดยอัตโนมัติ) คุณสามารถเตรียมฟังก์ชัน Callback หากกำหนดฟังก์ชันส่วนกลางต่อไปนี้ไว้ ฟังก์ชันดังกล่าวจะถูกเรียกเมื่อฟังก์ชัน การตรวจสอบสิทธิ์ล้มเหลว function gm_authFailure() { /* Code */ };