इवेंट

प्लैटफ़ॉर्म चुनें: Android iOS 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 ऑब्जेक्ट सुन सकता है:

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

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

एमवीसी की स्थिति में बदलाव

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

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

हैंडलिंग के इवेंट

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

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

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

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;
उदाहरण देखें

सैंपल आज़माएं

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

उदाहरण: आकार में बदलाव करना और ड्रैगिंग इवेंट

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

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

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

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

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

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;

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;
उदाहरण देखें

सैंपल आज़माएं

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

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

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

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;

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;
उदाहरण देखें

सैंपल आज़माएं

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

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

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

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

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;

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;
उदाहरण देखें

सैंपल आज़माएं

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

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

सुविधा के इस तरीके से हस्ताक्षर मिलता है, जैसा कि नीचे दिखाया गया है:

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

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

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

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

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;

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;

एचटीएमएल

<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>
उदाहरण देखें

सैंपल आज़माएं

हालांकि, ऊपर दिया गया कोड 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 */ };