মার্কারগুলিকে টেনে আনা যায়

যখন ড্র্যাগযোগ্যতা সক্রিয় করা থাকে, তখন ব্যবহারকারীরা মাউস বা অ্যারো কী ব্যবহার করে ম্যাপের উপর মার্কার ড্র্যাগ করতে পারেন। একটি মার্কারকে ড্র্যাগযোগ্য করতে, AdvancedMarkerElement.gmpDraggable প্রপার্টিটির মান true সেট করুন।

নিম্নলিখিত উদাহরণ মানচিত্রটিতে একটি ড্র্যাগযোগ্য মার্কার দেখানো হয়েছে, যা ড্র্যাগিং শেষ হলে ( dragend ইভেন্টটি ফায়ার হলে) তার আপডেট করা অবস্থান প্রদর্শন করে:

কিবোর্ড দিয়ে মার্কার ড্র্যাগ করতে:

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

কোডটি দেখুন

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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

    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.addListener('dragend', (event) => {
        const position = draggableMarker.position as google.maps.LatLng;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${position.lat}, ${position.lng}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

initMap();
index.ts

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

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await 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.addListener('dragend', (event) => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}
initMap();
index.js

বর্ণনামূলক পাঠ্য সেট করুন

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

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

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