इवेंट

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

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

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

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

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

सलाह: अगर आपको व्यूपोर्ट में किसी बदलाव का पता लगाना है, तो पक्का करें कि आप 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 क्लाउड शेल

इवेंट लिसनर में बंद करने की सुविधा का इस्तेमाल करें

इवेंट लिसनर को एक्ज़ीक्यूट करते समय, किसी ऑब्जेक्ट में निजी और स्थायी, दोनों डेटा जुड़े रहना अक्सर फ़ायदेमंद होता है. 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 क्लाउड शेल

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

इवेंट ट्रिगर होने पर, 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 क्लाउड शेल

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

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

सुविधा के इस तरीके के लिए हस्ताक्षर ज़रूरी है, जैसा कि यहां दिखाया गया है:

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

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

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

ध्यान दें कि addDomListener() दिखाए गए इवेंट को ब्राउज़र को पास करता है, जो उसे ब्राउज़र के डीओएम इवेंट मॉडल के हिसाब से मैनेज करता है. हालांकि, करीब-करीब सभी आधुनिक ब्राउज़र में कम से कम डीओएम लेवल 2 काम करता है. (डीओएम लेवल इवेंट के बारे में ज़्यादा जानकारी के लिए, Mozilla DOM Levels रेफ़रंस देखें.)

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

    <!-- 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 क्लाउड शेल

हालांकि, ऊपर दिया गया कोड Maps JavaScript एपीआई कोड है, लेकिन 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 */ };