इवेंट

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

इस पेज पर, यूज़र इंटरफ़ेस इवेंट और गड़बड़ी वाले इवेंट के बारे में बताया गया है. इन्हें प्रोग्राम के हिसाब से सुना और मैनेज किया जा सकता है.

यूज़र इंटरफ़ेस इवेंट

ब्राउज़र में JavaScript इवेंट पर आधारित होता है. इसका मतलब है कि JavaScript, इवेंट जनरेट करके इंटरैक्शन का जवाब देता है. साथ ही, वह किसी प्रोग्राम से दिलचस्प इवेंट सुनने की उम्मीद करता है. इवेंट दो तरह के होते हैं:

• उपयोगकर्ता इवेंट (जैसे, "क्लिक" माउस इवेंट), डीओएम से Maps JavaScript API पर भेजे जाते हैं. ये इवेंट, स्टैंडर्ड DOM इवेंट से अलग और अलग-अलग होते हैं.
• एमवीसी स्टेटस में बदलाव की सूचनाएं, Maps JavaScript API ऑब्जेक्ट में हुए बदलावों को दिखाती हैं. साथ ही, इनका नाम property_changed कॉन्वेंशन का इस्तेमाल करके रखा जाता है.

Maps JavaScript API का हर ऑब्जेक्ट, नाम वाले कई इवेंट एक्सपोर्ट करता है. कुछ खास इवेंट में दिलचस्पी रखने वाले प्रोग्राम, उन इवेंट के लिए JavaScript इवेंट लिसनर रजिस्टर करेंगे. साथ ही, जब ऑब्जेक्ट पर इवेंट हैंडलर रजिस्टर करने के लिए addListener() को कॉल करके उन इवेंट को रिसीव किया जाएगा, तब कोड को लागू किया जाएगा.

नीचे दिए गए सैंपल से आपको पता चलेगा कि मैप के साथ इंटरैक्ट करने पर, google.maps.Map से कौनसे इवेंट ट्रिगर होते हैं.

इवेंट की पूरी सूची के लिए, Maps JavaScript API का रेफ़रंस देखें. इवेंट, हर उस ऑब्जेक्ट के लिए अलग सेक्शन में दिखते हैं जिसमें इवेंट होते हैं.

यूज़र इंटरफ़ेस (यूआई) इवेंट

Maps JavaScript API में मौजूद कुछ ऑब्जेक्ट, उपयोगकर्ता के इवेंट के जवाब देने के लिए डिज़ाइन किए गए हैं. जैसे, माउस या कीबोर्ड इवेंट. उदाहरण के लिए, ये कुछ ऐसे उपयोगकर्ता इवेंट हैं जिन्हें google.maps.marker.AdvancedMarkerElement ऑब्जेक्ट सुन सकता है:

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

पूरी सूची के लिए, AdvancedMarkerElement क्लास देखें. ये इवेंट, स्टैंडर्ड DOM इवेंट जैसे लग सकते हैं, लेकिन ये असल में Maps JavaScript API का हिस्सा हैं. अलग-अलग ब्राउज़र, अलग-अलग डीओएम इवेंट मॉडल लागू करते हैं. इसलिए, Maps JavaScript API, डीओएम इवेंट को सुनने और उनका जवाब देने के लिए ये तरीके उपलब्ध कराता है. इसके लिए, अलग-अलग ब्राउज़र की खास बातों को मैनेज करने की ज़रूरत नहीं होती. आम तौर पर, ये इवेंट इवेंट में कुछ यूज़र इंटरफ़ेस (यूआई) स्टेटस (जैसे, माउस की पोज़िशन) की जानकारी देने वाले आर्ग्युमेंट भी पास करते हैं.

एमवीसी स्टेटस में बदलाव

आम तौर पर, एमवीसी ऑब्जेक्ट में स्टेटस होता है. जब भी किसी ऑब्जेक्ट की प्रॉपर्टी बदलती है, तो Maps JavaScript API एक इवेंट ट्रिगर करेगा, जिसमें बताया जाएगा कि प्रॉपर्टी बदल गई है. उदाहरण के लिए, जब मैप का ज़ूम लेवल बदलेगा, तो एपीआई किसी मैप पर zoom_changed इवेंट ट्रिगर करेगा. ऑब्जेक्ट पर इवेंट हैंडलर रजिस्टर करने के लिए, addListener() को कॉल करके, इन स्टेटस में हुए बदलावों को इंटरसेप्ट किया जा सकता है.

उपयोगकर्ता इवेंट और एमवीसी स्टेटस में होने वाले बदलाव एक जैसे दिख सकते हैं. हालांकि, आम तौर पर आपको अपने कोड में इनके लिए अलग-अलग व्यवहार करना होता है. उदाहरण के लिए, एमवीसी इवेंट, अपने इवेंट में आर्ग्युमेंट पास नहीं करते. आपको उस प्रॉपर्टी की जांच करनी होगी जो एमवीसी स्टेटस में बदलाव होने पर बदल गई है. इसके लिए, उस ऑब्जेक्ट पर सही getProperty तरीका कॉल करें.

इवेंट मैनेज करना

इवेंट की सूचनाएं पाने के लिए, addListener() इवेंट हैंडलर का इस्तेमाल करें. यह तरीका, सुनने के लिए एक इवेंट और तय किए गए इवेंट के होने पर कॉल करने के लिए एक फ़ंक्शन लेता है.

उदाहरण: मैप और मार्कर इवेंट

यहां दिया गया कोड, उपयोगकर्ता इवेंट को स्टेटस में बदलाव करने वाले इवेंट के साथ मिक्स करता है. हम मार्कर पर एक इवेंट हैंडलर अटैच करते हैं, जो क्लिक करने पर मैप को ज़ूम करता है. हम center प्रॉपर्टी में बदलाव करने के लिए, मैप में एक इवेंट हैंडलर भी जोड़ते हैं. साथ ही, 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

सलाह: अगर आपको व्यूपोर्ट में हुए बदलाव का पता लगाना है, तो कॉम्पोनेंट zoom_changed और center_changed इवेंट के बजाय, खास bounds_changed इवेंट का इस्तेमाल करें. Maps JavaScript API, इन बाद के इवेंट को अपने-आप ट्रिगर करता है. इसलिए, हो सकता है कि getBounds() तब तक काम के नतीजे न दिखाए, जब तक व्यूपोर्ट आधिकारिक तौर पर बदल न जाए. अगर आपको इस तरह के इवेंट के बाद getBounds() सुनना है, तो इसके बजाय bounds_changed इवेंट को सुनना न भूलें.

उदाहरण: आकार में बदलाव करने और खींचकर छोड़ने के इवेंट

किसी आकार में बदलाव करने या उसे खींचने-छोड़ने के बाद, कार्रवाई पूरी होने पर इवेंट ट्रिगर होता है. इवेंट और कुछ कोड स्निपेट की सूची के लिए, आकार देखें.

उदाहरण देखें (rectangle-event.html)

यूज़र इंटरफ़ेस (यूआई) इवेंट में आर्ग्युमेंट ऐक्सेस करना

Maps JavaScript API में यूज़र इंटरफ़ेस (यूआई) इवेंट, आम तौर पर एक इवेंट आर्ग्युमेंट पास करते हैं. इवेंट आर्ग्युमेंट को इवेंट लिसनर ऐक्सेस कर सकता है. इससे, इवेंट होने पर यूआई की स्थिति का पता चलता है. उदाहरण के लिए, यूज़र इंटरफ़ेस (यूआई) 'click' इवेंट आम तौर पर एक MouseEvent पास करता है. इसमें latLng प्रॉपर्टी होती है, जो मैप पर क्लिक की गई जगह की जानकारी देती है. ध्यान दें कि यह व्यवहार यूज़र इंटरफ़ेस (यूआई) इवेंट के लिए खास है. एमवीसी स्टेटस में होने वाले बदलाव, अपने इवेंट में आर्ग्युमेंट पास नहीं करते.

इवेंट के आर्ग्युमेंट को इवेंट लिसनर में उसी तरह ऐक्सेस किया जा सकता है जिस तरह किसी ऑब्जेक्ट की प्रॉपर्टी को ऐक्सेस किया जाता है. नीचे दिए गए उदाहरण में, मैप के लिए इवेंट लिसनर जोड़ा गया है. साथ ही, जब उपयोगकर्ता मैप पर क्लिक की गई जगह पर क्लिक करता है, तो एक मार्कर बन जाता है.

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

इवेंट लिसनर में क्लोज़र का इस्तेमाल करना

इवेंट लिसनर को लागू करते समय, किसी ऑब्जेक्ट में निजी और हमेशा मौजूद डेटा, दोनों को अटैच करना अक्सर फ़ायदेमंद होता है. JavaScript में "निजी" इंस्टेंस डेटा का इस्तेमाल नहीं किया जा सकता. हालांकि, इसमें क्लोज़र का इस्तेमाल किया जा सकता है. इससे इनर फ़ंक्शन, आउटर वैरिएबल को ऐक्सेस कर सकते हैं. क्लोज़र, इवेंट के लिसनर में काम के होते हैं. इनकी मदद से, उन वैरिएबल को ऐक्सेस किया जा सकता है जो आम तौर पर उन ऑब्जेक्ट से अटैच नहीं होते जिन पर इवेंट होते हैं.

यहां दिए गए उदाहरण में, इवेंट के लिए सुनने वाले फ़ंक्शन में फ़ंक्शन क्लोज़र का इस्तेमाल किया गया है, ताकि मार्कर के सेट को कोई गुप्त मैसेज असाइन किया जा सके. हर मार्कर पर क्लिक करने से, गुप्त मैसेज का वह हिस्सा दिखेगा जो मार्कर में मौजूद नहीं है.

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

इवेंट हैंडलर में प्रॉपर्टी पाना और सेट करना

Maps JavaScript API इवेंट सिस्टम में, कोई भी एमवीसी स्टेटस में बदलाव करने वाला इवेंट, इवेंट ट्रिगर होने पर आर्ग्युमेंट पास नहीं करता. (यूज़र इवेंट, ऐसे आर्ग्युमेंट पास करते हैं जिनकी जांच की जा सकती है.) अगर आपको एमवीसी की स्थिति में बदलाव होने पर किसी प्रॉपर्टी की जांच करनी है, तो आपको उस ऑब्जेक्ट पर सही getProperty() मैथड को साफ़ तौर पर कॉल करना चाहिए. यह जांच, हमेशा एमवीसी ऑब्जेक्ट की मौजूदा स्थिति को वापस लाएगी. ऐसा हो सकता है कि यह स्थिति, इवेंट के पहली बार ट्रिगर होने की स्थिति न हो.

ध्यान दें: किसी खास प्रॉपर्टी की स्थिति में हुए बदलाव का जवाब देने वाले इवेंट हैंडलर में, प्रॉपर्टी को साफ़ तौर पर सेट करने से, अनचाहा और/या अप्रत्याशित व्यवहार हो सकता है. उदाहरण के लिए, ऐसी प्रॉपर्टी सेट करने पर नया इवेंट ट्रिगर होगा. अगर इस इवेंट हैंडलर में हमेशा प्रॉपर्टी सेट की जाती है, तो अनलिमिटेड लूप बन सकता है.

नीचे दिए गए उदाहरण में, हमने ज़ूम इवेंट के जवाब देने के लिए एक इवेंट हैंडलर सेट अप किया है. इसमें, उस लेवल की जानकारी दिखाने वाली जानकारी वाली विंडो को दिखाया गया है.

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

डीओएम इवेंट सुनना

Maps JavaScript API इवेंट मॉडल, अपने कस्टम इवेंट बनाता और मैनेज करता है. हालांकि, ब्राउज़र में मौजूद DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) भी, इस्तेमाल किए जा रहे ब्राउज़र इवेंट मॉडल के हिसाब से, अपने इवेंट बनाता और भेजता है. अगर आपको इन इवेंट को कैप्चर करना है और इनका जवाब देना है, तो Maps JavaScript API, डीओएम इवेंट को सुनने और उनसे बंधने के लिए, addDomListener() स्टैटिक तरीका उपलब्ध कराता है.

इस आसान तरीके में हस्ताक्षर होता है, जैसा कि यहां दिखाया गया है:

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

यहां instance, ब्राउज़र पर काम करने वाला कोई भी डीओएम एलिमेंट हो सकता है. इसमें ये शामिल हैं:

• डीओएम के हैरारकी वाले सदस्य, जैसे कि window या document.body.myform
• नाम वाले एलिमेंट, जैसे कि document.getElementById("foo")

ध्यान दें कि addDomListener(), ब्राउज़र को इवेंट भेजता है, जो ब्राउज़र के DOM इवेंट मॉडल के हिसाब से इसे मैनेज करता है. हालांकि, ज़्यादातर आधुनिक ब्राउज़र कम से कम DOM लेवल 2 के साथ काम करते हैं. (डीओएम लेवल इवेंट के बारे में ज़्यादा जानकारी के लिए, 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>
  <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 ऑब्जेक्ट से जुड़ा होता है. साथ ही, यह एपीआई को एपीआई के सामान्य डोमेन से बाहर के ऑब्जेक्ट के साथ कम्यूनिकेट करने की अनुमति देता है.

इवेंट लिसनर हटाना

किसी खास इवेंट लिसनर को हटाने के लिए, उसे किसी वैरिएबल को असाइन किया जाना चाहिए. इसके बाद, removeListener() को कॉल किया जा सकता है. इसके लिए, उस वैरिएबल का नाम दें जिसे लिसनर को असाइन किया गया था.

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

google.maps.event.removeListener(listener1);

किसी इंस्टेंस से सभी लिसनर हटाने के लिए, इंस्टेंस का नाम डालकर 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);

किसी खास इंस्टेंस के लिए, किसी खास इवेंट टाइप के सभी लिसनर हटाने के लिए, 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 */ };