মার্কার টেনে নিয়ে যাওয়ার উপযুক্ত করে তোলা

ড্র্যাগ করার সুবিধা চালু করা থাকলে, ব্যবহারকারী মাউস বা তীরচিহ্ন কী ব্যবহার করে ম্যাপে মার্কার ড্র্যাগ করতে পারবেন। মার্কার ড্র্যাগেবল করতে, AdvancedMarkerElement.gmpDraggable প্রপার্টি true-এ সেট করুন।

নিচের উদাহরণ ম্যাপে একটি ড্র্যাগ করা যায় এমন মার্কার দেখানো হয়েছে যা ড্র্যাগ করা শেষ হলে (gmp-dragend ইভেন্ট ফায়ার করা হয়) আপডেট করা পজিশন দেখায়:

কীবোর্ড ব্যবহার করে মার্কার টেনে আনতে:

1. মার্কার ফোকাস না হওয়া পর্যন্ত ট্যাব কী প্রেস করুন।
2. তীরচিহ্নযুক্ত কী প্রেস করে আপনার পছন্দের মার্কার বেছে নিন।
3. টেনে আনার সুবিধা চালু করতে, Option + Space বা Option + Enter (Mac), Alt + Space বা Alt + Enter (Windows) প্রেস করুন।
4. মার্কার সরাতে তীরচিহ্ন 'কী' ব্যবহার করুন।
5. নতুন লোকেশনে মার্কার ড্রপ করতে, Space বা Enter প্রেস করুন। এটি টেনে আনার ফিচারও বন্ধ করে দেবে।
6. টেনে আনা বন্ধ করতে এবং মার্কারকে তার আগের অবস্থানে ফিরিয়ে আনতে, Esc প্রেস করুন।

কোডটি দেখুন

TypeScript

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

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

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position as google.maps.LatLngAltitude;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার বিষয়ে গাইড পড়ুন।

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

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

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

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();
index.js

বিবরণ সংক্রান্ত টেক্সট সেট করুন

মার্কারের জন্য বর্ণনামূলক টেক্সট সেট করতে, যা স্ক্রিন রিডার পড়তে পারে, AdvancedMarkerElement.title অ্যাট্রিবিউট ব্যবহার করুন, যেমন এখানে দেখানো হয়েছে:

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

title অ্যাট্রিবিউট সেট করা হলে, স্ক্রিন রিডার টেক্সট দেখতে পায় এবং মার্কারের উপর মাউস নিয়ে গেলে তা দেখা যায়।