ইভেন্ট

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

এই পৃষ্ঠায় ইউজার ইন্টারফেস ইভেন্ট ও সমস্যার ইভেন্ট সম্পর্কে বর্ণনা করা হয়েছে, যেগুলি আপনি শুনতে ও প্রোগ্রাম্যাটিকভাবে ম্যানেজ করতে পারবেন।

ইউজার ইন্টারফেস ইভেন্ট

ব্রাউজারের মধ্যে JavaScript হল ইভেন্ট দ্বারা পরিচালিত, যার অর্থ হল JavaScript ইভেন্ট তৈরি করে ইন্টার‌্যাকশনের উত্তর দেয় এবং আশা করে যে কোনও প্রোগ্রাম আকর্ষণীয় ইভেন্ট শুনবে। দুই ধরনের ইভেন্ট আছে:

  • ব্যবহারকারীর ইভেন্ট (যেমন "ক্লিক" মাউস ইভেন্ট) DOM থেকে Maps JavaScript API-তে প্রোপ্যাগেট করা হয়। এইসব ইভেন্ট স্ট্যান্ডার্ড DOM ইভেন্ট থেকে আলাদা ও স্বতন্ত্র।
  • MVC স্টেট পরিবর্তন সংক্রান্ত বিজ্ঞপ্তি Maps JavaScript API অবজেক্টে পরিবর্তন দেখায় এবং property_changed কনভেনশন ব্যবহার করে নাম দেওয়া হয়।

প্রতিটি Maps JavaScript API অবজেক্ট একাধিক নামযুক্ত ইভেন্ট এক্সপোর্ট করে। নির্দিষ্ট ইভেন্টে আগ্রহী প্রোগ্রামগুলি সেইসব ইভেন্টের জন্য জাভাস্ক্রিপ্ট ইভেন্ট লিসেনার রেজিস্টার করবে এবং অবজেক্টে ইভেন্ট হ্যান্ডলার রেজিস্টার করার জন্য addListener() কল করে সেইসব ইভেন্ট পেলে কোড এক্সিকিউট করবে।

আপনি ম্যাপের সাথে ইন্টার‍্যাক্ট করার সময় google.maps.Map-এর মাধ্যমে কোন কোন ইভেন্ট ট্রিগার হয়, তা নিম্নলিখিত স্যাম্পেল থেকে জানতে পারবেন।

ইভেন্টের সম্পূর্ণ তালিকার জন্য, Maps JavaScript API রেফারেন্স দেখুন। ইভেন্ট আছে এমন প্রতিটি অবজেক্টের জন্য আলাদা বিভাগে ইভেন্ট তালিকাভুক্ত করা হয়।

UI ইভেন্ট

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 ইভেন্ট শোনার এবং প্রতিক্রিয়া জানানোর জন্য এই মেকানিজম প্রদান করে, যাতে বিভিন্ন ক্রস-ব্রাউজার বিশেষত্ব ম্যানেজ করার প্রয়োজন না হয়। এইসব ইভেন্ট সাধারণত ইভেন্টের মধ্যে আর্গুমেন্ট পাস করে যা কিছু UI স্টেট (যেমন মাউসের পজিশন) নোট করে।

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();

জাভাস্ক্রিপ্ট

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();
উদাহরণ দেখুন

পরামর্শ: আপনি যদি ভিউপোর্টে কোনও পরিবর্তন শনাক্ত করার চেষ্টা করেন, তাহলে zoom_changed এবং center_changed ইভেন্টের পরিবর্তে নির্দিষ্ট bounds_changed ইভেন্ট ব্যবহার করতে ভুলবেন না। Maps JavaScript API এইসব পরবর্তী ইভেন্ট স্বাধীনভাবে ট্রিগার করে বলে, ভিউপোর্ট আনুষ্ঠানিকভাবে পরিবর্তন না হওয়া পর্যন্ত getBounds() হয়ত কোনও কার্যকর ফলাফল রিপোর্ট করতে পারবে না। এই ধরনের ইভেন্টের পরে আপনি যদি getBounds() করতে চান, তাহলে পরিবর্তে bounds_changed ইভেন্ট শুনতে ভুলবেন না।

উদাহরণ: শেপ এডিটিং ও ড্র্যাগিং ইভেন্ট

কোনও আকার এডিট বা টেনে আনা হলে, অ্যাকশন সম্পূর্ণ হওয়ার পরে একটি ইভেন্ট ট্রিগার হয়। ইভেন্টের তালিকা এবং কিছু কোড স্নিপেটের জন্য, শেপ দেখুন।

উদাহরণ দেখুন (rectangle-event.html)

UI ইভেন্টে আর্গুমেন্ট অ্যাক্সেস করা

Maps JavaScript API-এর মধ্যে UI ইভেন্ট সাধারণত একটি ইভেন্ট আর্গুমেন্ট পাস করে, যা ইভেন্ট লিসনার অ্যাক্সেস করতে পারে, ইভেন্টটি ঘটলে UI স্টেট নোট করে। যেমন, UI 'click' ইভেন্ট সাধারণত MouseEvent পাস করে যার মধ্যে latLng প্রপার্টি থাকে যা ম্যাপে ক্লিক করা লোকেশনকে বোঝায়। মনে রাখবেন যে এই আচরণ UI ইভেন্টের ক্ষেত্রে অনন্য; 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();

জাভাস্ক্রিপ্ট

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();
উদাহরণ দেখুন

ইভেন্ট লিসনারে ক্লোজার ব্যবহার করা

ইভেন্ট লিসেনার এক্সিকিউট করার সময়, কোনও অবজেক্টের সাথে ব্যক্তিগত ও স্থায়ী ডেটা, দুটিই অ্যাটাচ করা থাকলে, তা প্রায়শই সুবিধাজনক হয়। জাভাস্ক্রিপ্ট "ব্যক্তিগত" ইনস্ট্যান্স ডেটা সাপোর্ট করে না, তবে এটি ক্লোজার সাপোর্ট করে যা ইনার ফাংশনকে আউটার ভেরিয়েবল অ্যাক্সেস করার অনুমতি দেয়। ইভেন্ট লিসেনারের মধ্যে ক্লোজার ব্যবহার করা উপযোগী, কারণ এর মাধ্যমে এমন ভেরিয়েবল অ্যাক্সেস করা যায় যা সাধারণত ইভেন্ট ঘটা অবজেক্টের সাথে অ্যাটাচ করা থাকে না।

নিম্নলিখিত উদাহরণে, মার্কারের সেটে একটি গোপন মেসেজ অ্যাসাইন করার জন্য ইভেন্ট লিসেনারে ফাংশন ক্লোজার ব্যবহার করা হয়েছে। প্রতিটি মার্কারের উপর ক্লিক করলে গোপন মেসেজের একটি অংশ দেখা যাবে, যা মার্কারের মধ্যে নেই।

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,
            gmpClickable: true,
        });

        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.addEventListener('gmp-click', () => {
        infoWindow.open(marker.map, marker);
    });
}

void init();

জাভাস্ক্রিপ্ট

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,
            gmpClickable: true,
        });

        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.addEventListener('gmp-click', () => {
        infoWindow.open(marker.map, marker);
    });
}

void init();
উদাহরণ দেখুন

ইভেন্ট হ্যান্ডলারের মধ্যে প্রপার্টি পান ও সেট করুন

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();

জাভাস্ক্রিপ্ট

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();
উদাহরণ দেখুন

ইভেন্ট লিসনার সরান

কোনও নির্দিষ্ট ইভেন্ট লিসনার সরাতে, এটি অবশ্যই একটি ভেরিয়েবলে অ্যাসাইন করতে হবে। তারপর আপনি 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 {};