मार्कर को क्लिक करने और ऐक्सेस करने लायक बनाएं

जब किसी मार्कर पर क्लिक किया जा सकता है या उसे खींचकर छोड़ा जा सकता है, तो वह कीबोर्ड और माउस इनपुट का जवाब दे सकता है. मार्कर के बीच आने-जाने के लिए, माउस या कीबोर्ड का इस्तेमाल किया जा सकता है. साथ ही, अगर मार्कर को खींचकर छोड़ा जा सकता है, तो उसे इधर-उधर ले जाने के लिए भी इनका इस्तेमाल किया जा सकता है. title विकल्प में दिया गया टेक्स्ट, स्क्रीन रीडर पढ़ सकता है.

  • मार्कर को क्लिक करने लायक बनाने के लिए, AdvancedMarkerElement.gmpClickable प्रॉपर्टी को true पर सेट करें और क्लिक इवेंट हैंडलर जोड़ें.
  • मार्कर को खींचने और छोड़ने लायक बनाने के लिए, AdvancedMarkerElement.gmpDraggable प्रॉपर्टी को true पर सेट करें.
  • किसी मार्कर के बारे में जानकारी देने वाला टेक्स्ट सेट करने के लिए, AdvancedMarkerElement.title विकल्प का इस्तेमाल करें.

मार्कर को क्लिक करने लायक बनाएं

इस उदाहरण में, क्लिक किए जा सकने वाले पांच मार्कर के साथ एक मैप दिखाया गया है. इसमें फ़ोकस करने लायक पांच मार्कर हैं:

कीबोर्ड से मार्कर पर जाने के लिए:

  1. पहले मार्कर पर फ़ोकस करने के लिए टैब कुंजी का इस्तेमाल करें. अगर एक ही मैप पर कई मार्कर हैं, तो मार्कर पर जाने के लिए ऐरो कुंजियों का इस्तेमाल करें.
  2. अगर मार्कर पर क्लिक किया जा सकता है, तो "क्लिक करने" के लिए Enter बटन दबाएं. अगर किसी मार्कर में जानकारी विंडो है, तो उस पर क्लिक करके या Enter बटन या स्पेस बार को दबाकर, उसे खोला जा सकता है. जानकारी विंडो बंद होने पर, फ़ोकस वापस जुड़े हुए मार्कर पर आ जाएगा.
  3. मैप के बाकी कंट्रोल से आगे बढ़ना जारी रखने के लिए, Tab को फिर से दबाएं.

कोड देखें

TypeScript

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

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // Set LatLng and title text for the markers. The first marker (Boynton Pass)
    // receives the initial focus when tab is pressed. Use arrow keys to
    // move between markers; press tab again to cycle through the map controls.
    const tourStops = [
        {
            position: { lat: 34.8791806, lng: -111.8265049 }, 
            title: "Boynton Pass"
        },
        {
            position: { lat: 34.8559195, lng: -111.7988186 }, 
            title: "Airport Mesa"
        },
        {
            position: { lat: 34.832149, lng: -111.7695277 }, 
            title: "Chapel of the Holy Cross"
        },
        {
            position: { lat: 34.823736, lng: -111.8001857 }, 
            title: "Red Rock Crossing"
        },
        {
            position: { lat: 34.800326, lng: -111.7665047 }, 
            title: "Bell Rock"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
        });

        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    {
      position: { lat: 34.8791806, lng: -111.8265049 },
      title: "Boynton Pass",
    },
    {
      position: { lat: 34.8559195, lng: -111.7988186 },
      title: "Airport Mesa",
    },
    {
      position: { lat: 34.832149, lng: -111.7695277 },
      title: "Chapel of the Holy Cross",
    },
    {
      position: { lat: 34.823736, lng: -111.8001857 },
      title: "Red Rock Crossing",
    },
    {
      position: { lat: 34.800326, lng: -111.7665047 },
      title: "Bell Rock",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

initMap();
index.js

किसी मार्कर पर क्लिक न किया जा सके, इसके लिए क्लिक इवेंट लिसनर को हटाएं:

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

मार्कर को खींचने और छोड़ने लायक बनाना

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

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

कीबोर्ड के ज़रिए मार्कर को खींचने के लिए:

  1. जब तक मार्कर फ़ोकस नहीं हो जाते, तब तक Tab बटन को दबाकर रखें.
  2. पसंदीदा मार्कर पर जाने के लिए, ऐरो बटन का इस्तेमाल करें.
  3. खींचकर छोड़ने के लिए, Option + Space या Option + Enter (Mac), ALT + Space या Alt + Enter (Windows) दबाएं.
  4. मार्कर को एक जगह से दूसरी जगह ले जाने के लिए, ऐरो बटन का इस्तेमाल करें.
  5. मार्कर को उसकी नई जगह पर छोड़ने के लिए, Space या Enter दबाएं. इससे खींचने की सुविधा बंद हो जाएगी.
  6. मार्कर को उसकी पिछली स्थिति पर वापस लाने के लिए, Esc दबाएं.

कोड देखें

TypeScript

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

JavaScript

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

मार्कर स्केल सेट करें

मार्कर का साइज़ बढ़ाने से, सभी डिवाइसों (खास तौर पर टचस्क्रीन डिवाइसों) पर, मार्कर के साथ इंटरैक्ट करने में लगने वाला समय कम हो जाता है और सुलभता बेहतर होती है. डिफ़ॉल्ट मार्कर, डब्ल्यूसीएजी AA के कम से कम साइज़ स्टैंडर्ड को पूरा करते हैं. हालांकि, जिन डेवलपर को डब्ल्यूसीएजी एएए टारगेट के साइज़ का पालन करना है उनके लिए मार्कर का साइज़ बढ़ाया जाना चाहिए. मार्कर का साइज़ बढ़ाने के लिए, PinElement को इस्तेमाल करने का तरीका जानने और मार्कर का स्केल बदलने के लिए, बेसिक मार्कर कस्टमाइज़ेशन देखें.

यहां स्केल अप किए गए PinElement का इस्तेमाल करके, बड़ा मार्कर बनाने का एक उदाहरण दिया गया है:

    const pinScaled = new PinElement({
        scale: 2,
    });
    const markerScaled = new AdvancedMarkerElement({
        map,
        position: { lat: 37.419, lng: -122.02 },
        content: pinScaled.element,
    });