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

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

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

কীবোর্ড দিয়ে একটি মার্কার টেনে আনতে:

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

কোড দেখুন

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

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 map = new Map(document.getElementById('map') as HTMLElement, {
        center: {lat: 37.39094933041195, lng: -122.02503913145092},
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: {lat: 37.39094933041195, lng: -122.02503913145092},
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    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

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

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.39094933041195, lng: -122.02503913145092 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const infoWindow = new InfoWindow();
  const draggableMarker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.39094933041195, lng: -122.02503913145092 },
    gmpDraggable: true,
    title: "This marker is draggable.",
  });

  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 বৈশিষ্ট্য সেট করা হয়, পাঠ্যটি স্ক্রীন পাঠকদের কাছে দৃশ্যমান হয় এবং মাউসটি মার্কারের উপর ঘোরার সময় প্রদর্শিত হবে।