เหตุการณ์

เลือกแพลตฟอร์ม: 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 ฟังได้มีดังต่อไปนี้

• 'click'
• 'dblclick'
• 'mouseup'
• 'mousedown'
• 'mouseover'
• 'mouseout'

ดูรายการทั้งหมดได้ที่คลาส Marker เหตุการณ์เหล่านี้อาจดูเหมือนเหตุการณ์ 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

function initMap(): void {
  const myLatlng = { lat: -25.363, lng: 131.044 };

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

  const marker = new google.maps.Marker({
    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.getPosition() as google.maps.LatLng);
    }, 3000);
  });

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

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

JavaScript

function initMap() {
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
  });
  const marker = new google.maps.Marker({
    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.getPosition());
    }, 3000);
  });
  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}

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

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

TypeScript

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

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

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

JavaScript

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

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

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

window.initMap = initMap;
index.js

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

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

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

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

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

TypeScript

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

  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({
      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,
  secretMessage: string
) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
  });
  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({
      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.get("map"), marker);
  });
}

window.initMap = initMap;
index.js

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

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

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

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

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

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

TypeScript

function initMap(): void {
  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()!);
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

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

JavaScript

function initMap() {
  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());
  });
}

window.initMap = 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 Level)

TypeScript

function initMap(): void {
  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!");
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

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

JavaScript

function initMap() {
  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!");
  });
}

window.initMap = initMap;
index.js

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

HTML

<html>
  <head>
    <title>Listening to DOM Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></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

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

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