กิจกรรม

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

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

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

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

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

ออบเจ็กต์ Maps JavaScript API แต่ละรายการจะส่งออกเหตุการณ์ที่มีชื่อจำนวนหนึ่ง โปรแกรมที่สนใจเหตุการณ์บางอย่างจะลงทะเบียนโปรแกรมรับเหตุการณ์ 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() event handler เมธอดดังกล่าวจะรับเหตุการณ์ที่จะฟัง และฟังก์ชันที่จะเรียกใช้เมื่อเกิดเหตุการณ์ที่ระบุ

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

โค้ดต่อไปนี้จะรวมเหตุการณ์ของผู้ใช้เข้ากับเหตุการณ์การเปลี่ยนแปลงสถานะ เราแนบตัวแฮนเดิลเหตุการณ์กับเครื่องหมายที่ซูมแผนที่เมื่อคลิก นอกจากนี้ เรายังเพิ่มตัวแฮนเดิลเหตุการณ์ลงในแผนที่สําหรับการเปลี่ยนแปลงในพร็อพเพอร์ตี้ 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 จะส่งอาร์กิวเมนต์เหตุการณ์ ซึ่งโปรแกรมรับฟังเหตุการณ์เข้าถึงได้ โดยบันทึกสถานะ UI เมื่อเกิดเหตุการณ์ ตัวอย่างเช่น เหตุการณ์ 'click' ของ UI มักจะส่ง MouseEvent ที่มีพร็อพเพอร์ตี้ latLng ซึ่งระบุตําแหน่งที่คลิกบนแผนที่ โปรดทราบว่าลักษณะการทํางานนี้มีเฉพาะในเหตุการณ์ UI เท่านั้น การเปลี่ยนแปลงสถานะของ MVC จะไม่ส่งอาร์กิวเมนต์ในเหตุการณ์

คุณสามารถเข้าถึงอาร์กิวเมนต์ของเหตุการณ์ภายในโปรแกรมรับเหตุการณ์ได้เช่นเดียวกับการเข้าถึงพร็อพเพอร์ตี้ของออบเจ็กต์ ตัวอย่างต่อไปนี้จะเพิ่ม 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 เหตุการณ์

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

ตัวอย่างต่อไปนี้ใช้การปิดฟังก์ชันใน 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 ในระบบเหตุการณ์ Maps JavaScript API จะไม่ส่งอาร์กิวเมนต์เมื่อมีการทริกเกอร์เหตุการณ์ (เหตุการณ์ของผู้ใช้จะส่งอาร์กิวเมนต์ที่ตรวจสอบได้) หากต้องการตรวจสอบพร็อพเพอร์ตี้ในการเปลี่ยนแปลงสถานะของ 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 ได้ที่ข้อมูลอ้างอิงระดับ DOM ของ Mozilla)

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);

หากต้องการนํา Listeners ทั้งหมดสําหรับเหตุการณ์ประเภทหนึ่งๆ ของอินสแตนซ์หนึ่งๆ ออก ให้เรียกใช้ 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

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

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