ইভেন্ট

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

ব্যবহারকারী ইন্টারফেস ইভেন্ট

ব্রাউজারের মধ্যে থাকা জাভাস্ক্রিপ্ট ইভেন্ট-চালিত , যার অর্থ হলো জাভাস্ক্রিপ্ট বিভিন্ন ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় ইভেন্ট তৈরি করে এবং একটি প্রোগ্রামকে গুরুত্বপূর্ণ ইভেন্টগুলো শোনার প্রত্যাশা করা হয়। ইভেন্ট দুই প্রকারের হয়:

  • ব্যবহারকারীর ইভেন্টগুলি (যেমন 'ক্লিক' মাউস ইভেন্ট) DOM থেকে Maps জাভাস্ক্রিপ্ট API-তে পাঠানো হয়। এই ইভেন্টগুলি সাধারণ DOM ইভেন্টগুলি থেকে পৃথক ও স্বতন্ত্র।
  • MVC স্টেট পরিবর্তনের নোটিফিকেশনগুলো Maps জাভাস্ক্রিপ্ট API অবজেক্টের পরিবর্তনসমূহ প্রতিফলিত করে এবং এগুলোর নামকরণ property _changed কনভেনশন ব্যবহার করে করা হয়।

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

নিম্নলিখিত নমুনাটি দেখায় যে, আপনি যখন মানচিত্রটির সাথে মিথস্ক্রিয়া করেন তখন google.maps.Map দ্বারা কোন ইভেন্টগুলি ট্রিগার হয়।

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

UI ইভেন্ট

Maps JavaScript API-এর অন্তর্গত কিছু অবজেক্ট মাউস বা কীবোর্ড ইভেন্টের মতো ইউজার ইভেন্টে সাড়া দেওয়ার জন্য ডিজাইন করা হয়েছে। উদাহরণস্বরূপ, google.maps.marker.AdvancedMarkerElement অবজেক্টটি এই ধরনের কিছু ইউজার ইভেন্ট শুনতে পারে:

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

সম্পূর্ণ তালিকার জন্য AdvancedMarkerElement ক্লাসটি দেখুন। এই ইভেন্টগুলো দেখতে সাধারণ DOM ইভেন্টের মতো মনে হতে পারে, কিন্তু এগুলো আসলে Maps JavaScript API-এর অংশ। যেহেতু বিভিন্ন ব্রাউজার ভিন্ন ভিন্ন DOM ইভেন্ট মডেল প্রয়োগ করে, তাই Maps JavaScript API বিভিন্ন ব্রাউজারের স্বতন্ত্র বৈশিষ্ট্যগুলো সামলানোর ঝামেলা ছাড়াই DOM ইভেন্ট শোনা এবং সেগুলোতে সাড়া দেওয়ার জন্য এই ব্যবস্থাগুলো সরবরাহ করে। এই ইভেন্টগুলো সাধারণত ইভেন্টের ভেতরে আর্গুমেন্টও পাস করে, যা UI-এর কোনো অবস্থা (যেমন মাউসের অবস্থান) নির্দেশ করে।

MVC অবস্থার পরিবর্তন

MVC অবজেক্টগুলিতে সাধারণত স্টেট থাকে। যখনই কোনো অবজেক্টের প্রপার্টি পরিবর্তিত হয়, Maps JavaScript API সেই প্রপার্টির পরিবর্তন নির্দেশ করার জন্য একটি ইভেন্ট ফায়ার করে। উদাহরণস্বরূপ, যখন কোনো ম্যাপের জুম লেভেল পরিবর্তিত হয়, তখন API-টি ম্যাপটিতে একটি zoom_changed ইভেন্ট ফায়ার করে। আপনি addListener() কল করে অবজেক্টটিতে ইভেন্ট হ্যান্ডলার রেজিস্টার করার মাধ্যমে এই স্টেট পরিবর্তনগুলিও ইন্টারসেপ্ট করতে পারেন।

ইউজার ইভেন্ট এবং MVC স্টেট পরিবর্তন দেখতে একই রকম মনে হতে পারে, কিন্তু আপনার কোডে এগুলিকে ভিন্নভাবে ব্যবহার করা উচিত। উদাহরণস্বরূপ, MVC ইভেন্টগুলি তাদের ইভেন্টের মধ্যে আর্গুমেন্ট পাস করে না। MVC স্টেট পরিবর্তনের সময় যে প্রপার্টিটি পরিবর্তিত হয়েছে, সেটি পরীক্ষা করার জন্য সেই অবজেক্টের উপযুক্ত get Property মেথডটি কল করুন।

ইভেন্টগুলি পরিচালনা করুন

ইভেন্ট নোটিফিকেশনের জন্য রেজিস্টার করতে addListener() ইভেন্ট হ্যান্ডলারটি ব্যবহার করুন। এই মেথডটি শোনার জন্য একটি ইভেন্ট এবং নির্দিষ্ট ইভেন্টটি ঘটলে কল করার জন্য একটি ফাংশন গ্রহণ করে।

উদাহরণ: মানচিত্র এবং মার্কার ইভেন্ট

নিম্নলিখিত কোডটি ইউজার ইভেন্টের সাথে স্টেট চেঞ্জ ইভেন্টকে একত্রিত করে। এই উদাহরণটি একটি মার্কারের সাথে একটি ইভেন্ট হ্যান্ডলার যুক্ত করে, যা ক্লিক করা হলে ম্যাপ জুম করে। এটি ম্যাপের ' center প্রপার্টির পরিবর্তনের জন্য একটি ইভেন্ট হ্যান্ডলারও যুক্ত করে এবং center_changed ' ইভেন্টটি পাওয়ার পর ৩ সেকেন্ড পরে ম্যাপটিকে আবার মার্কারটিতে প্যান করে ফিরিয়ে আনে।

টাইপস্ক্রিপ্ট

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 ইভেন্টটি লিসেন করুন।

উদাহরণ: আকৃতি সম্পাদনা এবং ড্র্যাগিং ইভেন্ট

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

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

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

Maps JavaScript API-এর UI ইভেন্টগুলো সাধারণত একটি ইভেন্ট আর্গুমেন্ট পাস করে, যা ইভেন্ট লিসেনার অ্যাক্সেস করতে পারে এবং ইভেন্টটি ঘটার সময় UI-এর অবস্থা নোট করে রাখে। উদাহরণস্বরূপ, একটি UI 'click' ইভেন্ট সাধারণত একটি MouseEvent পাস করে, যাতে একটি latLng প্রপার্টি থাকে যা ম্যাপে ক্লিক করা অবস্থানটি নির্দেশ করে। উল্লেখ্য যে, এই আচরণটি শুধুমাত্র UI ইভেন্টের ক্ষেত্রেই দেখা যায়; MVC স্টেট পরিবর্তনের ইভেন্টগুলোতে কোনো আর্গুমেন্ট পাস করা হয় না।

আপনি একটি অবজেক্টের প্রোপার্টি যেভাবে অ্যাক্সেস করেন, ঠিক সেভাবেই একটি ইভেন্ট লিসেনারের মধ্যে ইভেন্টের আর্গুমেন্টগুলো অ্যাক্সেস করতে পারেন। নিচের উদাহরণটি ম্যাপের জন্য একটি ইভেন্ট লিসেনার যোগ করে এবং ব্যবহারকারী যখন ম্যাপের নির্দিষ্ট স্থানে ক্লিক করেন, তখন একটি মার্কার তৈরি করে।

টাইপস্ক্রিপ্ট

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

নমুনা চেষ্টা করুন

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

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

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

টাইপস্ক্রিপ্ট

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

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

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

নমুনা চেষ্টা করুন

ইভেন্ট হ্যান্ডলারের মধ্যে প্রোপার্টিগুলি পাওয়া এবং সেট করা

Maps JavaScript API ইভেন্ট সিস্টেমের কোনো MVC স্টেট চেঞ্জ ইভেন্টই ট্রিগার হওয়ার সময় আর্গুমেন্ট পাস করে না। (ইউজার ইভেন্টগুলো আর্গুমেন্ট পাস করে, যা ইন্সপেক্ট করা যায়।) যদি কোনো MVC স্টেট চেঞ্জের সময় আপনার কোনো প্রপার্টি ইন্সপেক্ট করার প্রয়োজন হয়, তবে আপনার সেই অবজেক্টের উপর উপযুক্ত get Property () মেথডটি স্পষ্টভাবে কল করা উচিত। এই ইন্সপেক্টেশন সর্বদা MVC অবজেক্টের বর্তমান স্টেটটি পুনরুদ্ধার করবে, যা ইভেন্টটি প্রথমবার ফায়ার হওয়ার সময়ের স্টেট নাও হতে পারে।

দ্রষ্টব্য : কোনো নির্দিষ্ট প্রপার্টির অবস্থার পরিবর্তনের প্রতিক্রিয়া হিসেবে কাজ করে এমন ইভেন্ট হ্যান্ডলারের মধ্যে সরাসরি সেই প্রপার্টিটি সেট করলে অপ্রত্যাশিত এবং/অথবা অনাকাঙ্ক্ষিত আচরণ দেখা দিতে পারে। উদাহরণস্বরূপ, এই ধরনের একটি প্রপার্টি সেট করলে একটি নতুন ইভেন্ট ট্রিগার হবে, এবং আপনি যদি সবসময় এই ইভেন্ট হ্যান্ডলারের মধ্যেই প্রপার্টিটি সেট করেন, তাহলে একটি অসীম লুপ তৈরি হয়ে যেতে পারে।

নিচের উদাহরণটিতে দেখানো হয়েছে, কীভাবে একটি ইভেন্ট হ্যান্ডলার সেট আপ করতে হয় যা জুম ইভেন্টের প্রতিক্রিয়ায় সেই লেভেলটি প্রদর্শনকারী একটি তথ্য উইন্ডো খুলে দেবে।

টাইপস্ক্রিপ্ট

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 */ };

টাইপস্ক্রিপ্টে, নিচে দেখানো অনুযায়ী ফাংশনটিকে গ্লোবাল স্কোপে যোগ করার প্রয়োজন হতে পারে:

// 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 {};