Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

मार्कर को खींचकर छोड़ने की सुविधा चालू करना

मार्कर को खींचने और छोड़ने की सुविधा चालू होने पर, उपयोगकर्ता माउस या ऐरो बटन का इस्तेमाल करके, मैप पर मार्कर खींच और छोड़ सकते हैं. किसी मार्कर को खींचने और छोड़ने की सुविधा चालू करने के लिए, AdvancedMarkerElement.gmpDraggable प्रॉपर्टी को true पर सेट करें.

यहां दिए गए उदाहरण के मैप में, खींचने और छोड़ने की सुविधा वाला मार्कर दिखाया गया है. मार्कर को खींचना और छोड़ना पूरा होने पर, उसकी अपडेट की गई पोज़िशन दिखती है. ऐसा तब होता है, जब dragend इवेंट ट्रिगर होता है:

कीबोर्ड का इस्तेमाल करके मार्कर को खींचने और छोड़ने के लिए:

जब तक मार्कर फ़ोकस में न आ जाएं, तब तक टैब बटन दबाएं.
अपनी पसंद के मार्कर पर जाने के लिए, ऐरो बटन का इस्तेमाल करें.
मार्कर को खींचने और छोड़ने की सुविधा चालू करने के लिए, Option + Space या Option + Enter (Mac), Alt + Space या Alt + Enter (Windows) बटन दबाएं.
मार्कर को एक से दूसरी जगह ले जाने के लिए, ऐरो बटन इस्तेमाल करें.
मार्कर को उसकी नई जगह पर छोड़ने के लिए, Space या Enter बटन दबाएं. इससे, मार्कर को खींचने और छोड़ने की सुविधा बंद हो जाएगी.
मार्कर को खींचने और छोड़ने की सुविधा बंद करने और उसे उसकी पिछली पोज़िशन पर वापस लाने के लिए, Esc बटन दबाएं.

कोड देखें

TypeScript

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

JavaScript

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 एट्रिब्यूट सेट होने पर, स्क्रीन रीडर को टेक्स्ट दिखता है. साथ ही, मार्कर पर कर्सर घुमाने पर भी यह टेक्स्ट दिखता है.