इवेंट

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

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

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

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

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

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

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

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

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

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

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

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

MVC के स्टेटस में बदलाव

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

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

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

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

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

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

TypeScript

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { LatLng }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    // Retrieve the map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map from the map element.
    const innerMap = mapElement.innerMap;

    const originalPosition = new LatLng(mapElement.center!);

    const marker = new AdvancedMarkerElement({
        position: originalPosition,
        map: innerMap,
        title: 'Click to zoom',
        gmpClickable: true,
    });

    innerMap.addListener('center_changed', () => {
        // 3 seconds after the center of the map has changed,
        // pan back to the marker.
        window.setTimeout(() => {
            innerMap.panTo(originalPosition);
        }, 3000);
    });

    // Zoom in when the marker is clicked.
    marker.addEventListener('gmp-click', () => {
        innerMap.setZoom(8);
        innerMap.setCenter(originalPosition);
    });
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { LatLng }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    // Retrieve the map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map from the map element.
    const innerMap = mapElement.innerMap;

    const originalPosition = new LatLng(mapElement.center);

    const marker = new AdvancedMarkerElement({
        position: originalPosition,
        map: innerMap,
        title: 'Click to zoom',
        gmpClickable: true,
    });

    innerMap.addListener('center_changed', () => {
        // 3 seconds after the center of the map has changed,
        // pan back to the marker.
        window.setTimeout(() => {
            innerMap.panTo(originalPosition);
        }, 3000);
    });

    // Zoom in when the marker is clicked.
    marker.addEventListener('gmp-click', () => {
        innerMap.setZoom(8);
        innerMap.setCenter(originalPosition);
    });
}

void init();
index.js

उदाहरण देखें

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

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

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

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

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

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

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

TypeScript

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    innerMap.addListener('click', (event: google.maps.MapMouseEvent) => {
        if (!event.latLng) return;
        new AdvancedMarkerElement({
            position: event.latLng,
            map: innerMap,
        });
        innerMap.panTo(event.latLng);
    });
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    innerMap.addListener('click', (event) => {
        if (!event.latLng) return;
        new AdvancedMarkerElement({
            position: event.latLng,
            map: innerMap,
        });
        innerMap.panTo(event.latLng);
    });
}

void init();
index.js

उदाहरण देखें

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

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

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

TypeScript

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    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.
    innerMap.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 (const secretMessage of secretMessages) {
        const marker = new AdvancedMarkerElement({
            position: {
                lat: bounds.south + latSpan * Math.random(),
                lng: bounds.west + lngSpan * Math.random(),
            },
            map: innerMap,
        });

        void attachSecretMessage(marker, secretMessage);
    }
}

// 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.
async function attachSecretMessage(
    marker: google.maps.marker.AdvancedMarkerElement,
    secretMessage: string
) {
    const { InfoWindow } = await google.maps.importLibrary('maps');

    const infoWindow = new InfoWindow({
        content: secretMessage,
    });

    marker.addListener('gmp-click', () => {
        infoWindow.open(marker.map, marker);
    });
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const bounds = {
        north: -25.363882,
        south: -31.203405,
        east: 131.044922,
        west: 125.244141,
    };

    // Display the area between the location southWest and northEast.
    innerMap.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 (const secretMessage of secretMessages) {
        const marker = new AdvancedMarkerElement({
            position: {
                lat: bounds.south + latSpan * Math.random(),
                lng: bounds.west + lngSpan * Math.random(),
            },
            map: innerMap,
        });

        void attachSecretMessage(marker, secretMessage);
    }
}

// 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.
async function attachSecretMessage(marker, secretMessage) {
    const { InfoWindow } = await google.maps.importLibrary('maps');

    const infoWindow = new InfoWindow({
        content: secretMessage,
    });

    marker.addListener('gmp-click', () => {
        infoWindow.open(marker.map, marker);
    });
}

void init();
index.js

उदाहरण देखें

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

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

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

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

TypeScript

async function init() {
    // Request needed libraries.
    const { InfoWindow } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const infoWindow = new InfoWindow({
        content: 'Change the zoom level',
        position: mapElement.center,
    });

    infoWindow.open(innerMap);

    innerMap.addListener('zoom_changed', () => {
        infoWindow.setContent('Zoom: ' + innerMap.getZoom()!);
    });
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

async function init() {
    // Request needed libraries.
    const { InfoWindow } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const infoWindow = new InfoWindow({
        content: 'Change the zoom level',
        position: mapElement.center,
    });

    infoWindow.open(innerMap);

    innerMap.addListener('zoom_changed', () => {
        infoWindow.setContent('Zoom: ' + innerMap.getZoom());
    });
}

void init();
index.js

उदाहरण देखें

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

किसी इवेंट लिसनर को हटाने के लिए, उसे किसी वैरिएबल को असाइन किया जाना चाहिए. इसके बाद, 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 */ };

TypeScript में, फ़ंक्शन को ग्लोबल स्कोप में जोड़ना ज़रूरी हो सकता है. इसके लिए, यहां दिया गया तरीका अपनाएं:

// Define the callback function.
window.gm_authFailure = () => {
  console.error("Google Maps failed to authenticate.");
  /* Code */
};

// Add gm_authFailure to the global scope.
declare global {
  interface Window {
    gm_authFailure?: () => void;
  }
}
export {};