मैप की नई स्टाइल, जल्द ही Google Maps Platform पर उपलब्ध होगी. मैप की स्टाइल में हुए इस अपडेट में, नया डिफ़ॉल्ट कलर पटल जोड़ा गया है. साथ ही, मैप के अनुभवों और उसे इस्तेमाल करने के तरीके में सुधार भी किए गए हैं. मार्च 2025 में, सभी मैप स्टाइल अपने-आप अपडेट हो जाएंगी. उपलब्धता और जल्दी ऑप्ट इन करने के तरीके के बारे में ज़्यादा जानकारी के लिए, Google Maps Platform के लिए नई मैप स्टाइल देखें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

स्थान ऑटोकंप्लीट (झलक)

यह प्रॉडक्ट या सुविधा, झलक (Pre-GA) के तौर पर उपलब्ध है. ऐसा हो सकता है कि Pre-GA प्रॉडक्ट और सुविधाएं पूरी तरह काम न करें. साथ ही, हो सकता है कि Pre-GA प्रॉडक्ट और सुविधाओं में किए गए बदलाव, Pre-GA वाले अन्य वर्शन के साथ काम न करें. Pre-GA ऑफ़र पर Google Maps Platform की सेवा की खास शर्तें लागू होती हैं. ज़्यादा जानकारी के लिए, लॉन्च के चरण की जानकारी देखें.

नए बेहतर स्थान ऑटोकंप्लीट के लिए पूर्वावलोकन रिलीज़ में आपका स्वागत है. ऑटोकंप्लीट, Maps JavaScript API में मौजूद 'जगहें' लाइब्रेरी की एक सुविधा है. अपने-आप पूरा होने की सुविधा का इस्तेमाल किया जा सकता है, ताकि आपके ऐप्लिकेशन को Google Maps के खोज फ़ील्ड में पहले से कुछ खोजने के लिए टाइप किया जा सके. ऑटोकंप्लीट की सुविधा, जगह के नामों, पतों, और प्लस कोड को बंद करने के साथ-साथ पूरे शब्दों और सबस्ट्रिंग से भी मेल खा सकती है. इसलिए, ऐप्लिकेशन किसी भी उपयोगकर्ता को क्वेरी भेज सकते हैं, ताकि वह जब चाहें, तब अनुमान लगा सके.

ज़रूरी शर्तें

'जगह की जानकारी अपने-आप पूरी होने की सुविधा' (झलक देखें) का इस्तेमाल करने के लिए, आपको अपने Google Cloud प्रोजेक्ट में "Locations API" चालू करना होगा. साथ ही, अपने बूटस्ट्रैप लोडर में बीटा चैनल (v: "beta") की जानकारी देनी होगी. ज़्यादा जानकारी के लिए, शुरू करें देखें.

नया क्या है

स्थान ऑटोकंप्लीट (झलक) में नीचे दिए गए तरीकों से सुधार किए गए हैं:

टेक्स्ट इनपुट प्लेसहोल्डर, सुझावों की सूची के लोगो, और जगह के सुझावों के लिए, ऑटोकंप्लीट विजेट के यूज़र इंटरफ़ेस (यूआई) में, रीजनल लोकलाइज़ेशन (इसमें आरटीएल भाषाओं के साथ-साथ अन्य भाषाएं भी शामिल हैं) की सुविधा काम करती है.
बेहतर सुलभता. इसमें स्क्रीन रीडर और कीबोर्ड इंटरैक्शन से जुड़ी सहायता भी शामिल है.
अपने-आप पूरा होने वाला विजेट, वापस किए गए ऑब्जेक्ट को आसानी से मैनेज करने के लिए, नई प्लेस क्लास दिखाता है.
मोबाइल डिवाइसों और छोटी स्क्रीन के लिए बेहतर सहायता.
बेहतर प्रदर्शन और बेहतर ग्राफ़िकल लुक.

किसी वेब पेज या Google मैप पर, ऑटोकंप्लीट विजेट जोड़ा जा सकता है. ऑटोकंप्लीट विजेट एक टेक्स्ट इनपुट फ़ील्ड बनाता है और यूज़र इंटरफ़ेस (यूआई) चुनने की सूची में अनुमानों को शामिल करता है. साथ ही, gmp-placeselect लिसनर के ज़रिए उपयोगकर्ता के क्लिक करने पर जगह की जानकारी दिखाता है. इस सेक्शन में, किसी वेब पेज या Google Maps में अपने-आप पूरा होने वाला विजेट जोड़ने का तरीका बताया गया है.

किसी वेब पेज में अपने-आप पूरा होने वाला विजेट जोड़ने के लिए, एक नया google.maps.places.PlaceAutocompleteElement बनाएं और उसे पेज में जोड़ें, जैसा कि यहां दिए गए उदाहरण में दिखाया गया है:

TypeScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
    google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);index.ts

JavaScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
document.body.appendChild(placeAutocomplete);
index.js

पूरे कोड का उदाहरण देखें

मैप में अपने-आप पूरा होने वाला विजेट जोड़ने के लिए, एक नया google.maps.places.PlaceAutocompleteElement इंस्टेंस बनाएं. इसके बाद, PlaceAutocompleteElement को div में जोड़ें, और उसे मैप पर कस्टम कंट्रोल के तौर पर पुश करें, जैसा कि इस उदाहरण में दिखाया गया है:

TypeScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.ts

JavaScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";

const card = document.getElementById("place-autocomplete-card");

//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.js

पूरे कोड का उदाहरण देखें

ऑटोकंप्लीट की सुविधा के सुझावों को सीमित करें

जगह के अपने-आप पूरे होने की सुविधा, डिफ़ॉल्ट रूप से सभी तरह की जगहों को दिखाती है. यह उपयोगकर्ता की जगह के आस-पास के अनुमानों के हिसाब से होती है. साथ ही, उपयोगकर्ता की चुनी हुई जगह के लिए उपलब्ध सभी डेटा फ़ील्ड को फ़ेच करती है. जगह की जानकारी के लिए, ऑटोकंप्लीट की सुविधा के विकल्प सेट करें, ताकि खोज के नतीजों में ज़्यादा बदलाव करके या विकल्प दिखाने के लिए, ज़्यादा काम के अनुमान दिखाए जा सकें.

नतीजों पर पाबंदी लगाने से, ऑटोकंप्लीट विजेट उन नतीजों को अनदेखा कर देता है जो पाबंदी वाले इलाके से बाहर हैं. एक सामान्य तरीका यह है कि नतीजों को मैप की सीमाओं तक सीमित कर दिया जाए. नतीजों को मापदंड के बाहर रखने से ऑटोकंप्लीट विजेट, तय किए गए हिस्से में ही नतीजे दिखाता है. हालांकि, हो सकता है कि कुछ मैच उस एरिया से बाहर के हों.

देश के हिसाब से जगह खोजने पर पाबंदी लगाएं

जगह की जानकारी को एक या एक से ज़्यादा देशों तक सीमित करने के लिए, componentRestrictions प्रॉपर्टी का इस्तेमाल करके, देश के कोड बताएं. ये कोड इस स्निपेट में दिखाए गए हैं:

const pac = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['us', 'au']},
});

जगह की खोज को मैप की सीमाओं तक सीमित करें

जगह की खोज को मैप की सीमा तक सीमित करने के लिए, locationRestrictions प्रॉपर्टी का इस्तेमाल करके सीमाएं जोड़ें, जैसा कि इस स्निपेट में दिखाया गया है:

const pac = new google.maps.places.PlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

मैप की सीमाओं तक सीमित करते समय, लिसनर को जोड़ना न भूलें, ताकि बाउंड्री बदलने पर उनकी जानकारी अपडेट हो जाए:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

locationRestriction को हटाने के लिए, इसे null पर सेट करें.

पूर्वाग्रह की जगह के बारे में खोज के नतीजे

पूर्वाग्रह locationBias प्रॉपर्टी का इस्तेमाल करके और एक रेडियस पास करके, खोज के नतीजों को सर्कल एरिया में रखता है, जैसा कि यहां दिखाया गया है:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

locationBias को हटाने के लिए, इसे null पर सेट करें.

किसी खास तरह की जगह से जुड़े खोज के नतीजों को सीमित करें

types प्रॉपर्टी का इस्तेमाल करके और एक या एक से ज़्यादा टाइप तय करके, खोज के नतीजों को कुछ खास तरह की जगहों तक सीमित करें, जैसा कि यहां दिखाया गया है:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  types: ['establishment'],
});

इस्तेमाल किए जा सकने वाले टाइप की पूरी सूची देखने के लिए, टेबल 3: जगह पर अपने-आप पूरा होने वाले अनुरोध के लिए इस्तेमाल किए जा सकने वाले टाइप देखें.

स्थान विवरण पाएं

चुनी गई जगह की जगह की जानकारी पाने के लिए, PlaceAutocompleteElement में gmp-place-select लिसनर जोड़ें, जैसा कि इस उदाहरण में दिखाया गया है:

TypeScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(
        place.toJSON(), /* replacer */ null, /* space */ 2);
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  selectedPlaceTitle.textContent = "Selected Place:";
  selectedPlaceInfo.textContent = JSON.stringify(
    place.toJSON(),
    /* replacer */ null,
    /* space */ 2,
  );
});index.js

पूरे कोड का उदाहरण देखें

पिछले उदाहरण में, इवेंट लिसनर जगह की क्लास का ऑब्जेक्ट दिखाता है. अपने ऐप्लिकेशन के लिए ज़रूरी जगह की जानकारी के डेटा फ़ील्ड पाने के लिए, place.fetchFields() को कॉल करें.

अगले उदाहरण में दिया गया लिसनर, जगह की जानकारी का अनुरोध करता है और उसे मैप पर दिखाता है.

TypeScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
        map.fitBounds(place.viewport);
    } else {
        map.setCenter(place.location);
        map.setZoom(17);
    }

    let content = '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
    '<span id="place-address">' + place.formattedAddress + '</span>' +
    '</div>';

    updateInfoWindow(content, place.location);
    marker.position = place.location;
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // If the place has a geometry, then present it on a map.
  if (place.viewport) {
    map.fitBounds(place.viewport);
  } else {
    map.setCenter(place.location);
    map.setZoom(17);
  }

  let content =
    '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' +
    place.displayName +
    "</span><br />" +
    '<span id="place-address">' +
    place.formattedAddress +
    "</span>" +
    "</div>";

  updateInfoWindow(content, place.location);
  marker.position = place.location;
});index.js

पूरे कोड का उदाहरण देखें

चुनी गई जगह के लिए जियोकोडिंग नतीजे पाएं

चुने गए स्थान के लिए जियोकोडिंग परिणाम पाने के लिए, स्थान पाने के लिए google.maps.Geocoder का इस्तेमाल करें, जैसा कि इस स्निपेट में दिखाया गया है:

const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 50.064192, lng: -130.605469},
  zoom: 3,
});

const marker = new google.maps.Marker({map});
const autocomplete = new google.maps.places.PlaceAutocompleteElement();
const geocoder = new google.maps.Geocoder();

autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => {
  const results = await geocoder.geocode({place.id});
  marker.setPlace({
    placeId: place.id,
    location: results[0].geometry.location,
  });
});

मैप के उदाहरण

इस सेक्शन में, इस पेज पर दिए गए उदाहरण वाले मैप का पूरा कोड दिया गया है.

ऑटोकंप्लीट एलिमेंट

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

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }] = await Promise.all([
        google.maps.importLibrary("places"),
    ]);
    // Create the input HTML element, and append it.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-placeselect listener, and display the results.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}

initMap();index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
  // Create the input HTML element, and append it.
  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  document.body.appendChild(placeAutocomplete);

  // Inject HTML UI.
  const selectedPlaceTitle = document.createElement("p");

  selectedPlaceTitle.textContent = "";
  document.body.appendChild(selectedPlaceTitle);

  const selectedPlaceInfo = document.createElement("pre");

  selectedPlaceInfo.textContent = "";
  document.body.appendChild(selectedPlaceInfo);
  // Add the gmp-placeselect listener, and display the results.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    selectedPlaceTitle.textContent = "Selected Place:";
    selectedPlaceInfo.textContent = JSON.stringify(
      place.toJSON(),
      /* replacer */ null,
      /* space */ 2,
    );
  });
}

initMap();index.js

सीएसएस

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

p {
  font-family: Roboto, sans-serif;
  font-weight: bold;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Place Autocomplete element</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p style="font-family: roboto, sans-serif">Search for a place here:</p>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>index.html

सैंपल आज़माएं

JSFiddle.net Google क्लाउड शेल

ऑटोकंप्लीट मैप

इस उदाहरण में, Google Maps में ऑटोकंप्लीट विजेट जोड़ने का तरीका बताया गया है.

TypeScript

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 40.749933, lng: -73.98633 },
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

    // Create the marker and infowindow
    marker = new google.maps.marker.AdvancedMarkerElement({
        map,
    });

    infoWindow = new google.maps.InfoWindow({});

    // Add the gmp-placeselect listener, and display the results on the map.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            map.fitBounds(place.viewport);
        } else {
            map.setCenter(place.location);
            map.setZoom(17);
        }

        let content = '<div id="infowindow-content">' +
        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
        '<span id="place-address">' + place.formattedAddress + '</span>' +
        '</div>';

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();index.ts

JavaScript

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  placeAutocomplete.id = "place-autocomplete-input";

  const card = document.getElementById("place-autocomplete-card");

  //@ts-ignore
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
  // Create the marker and infowindow
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});
  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      "</span><br />" +
      '<span id="place-address">' +
      place.formattedAddress +
      "</span>" +
      "</div>";

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
  infoWindow.setContent(content);
  infoWindow.setPosition(center);
  infoWindow.open({
    map,
    anchor: marker,
    shouldFocus: false,
  });
}

initMap();index.js

सीएसएस

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#place-autocomplete-card {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 10px;
  padding: 5px;
  font-family: Roboto, sans-serif;
  font-size: large;
  font-weight: bold;
}

gmp-place-autocomplete {
  width: 300px;
}

#infowindow-content .title {
  font-weight: bold;
}

#map #infowindow-content {
  display: inline;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Place Autocomplete map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>index.html

सैंपल आज़माएं

JSFiddle.net Google क्लाउड शेल

प्लेस पिकर कॉम्पोनेंट का इस्तेमाल करना

ध्यान दें: यह सैंपल, ओपन सोर्स लाइब्रेरी का इस्तेमाल करता है. लाइब्रेरी से जुड़ी मदद और सुझाव या राय पाने के लिए, README देखें.

वेब कॉम्पोनेंट का इस्तेमाल करके, कोड की कुछ लाइनों का इस्तेमाल करके जगह के ऑटोकंप्लीट की सुविधा को दिखाएं.

खोज बॉक्स के साथ GIF. उपयोगकर्ता, इनपुट के तौर पर पता टाइप करना शुरू करता है. ऐसा करने पर, उससे जुड़े पतों के साथ एक ड्रॉपडाउन
दिखता है. उपयोगकर्ता ड्रॉपडाउन में मौजूद किसी पते पर क्लिक करता है और खोज बॉक्स में
बाकी पता भर जाता है. — पहली इमेज: अपने-आप पूरा होने की सुविधा का इस्तेमाल करके किसी खास पते या जगह को खोजने के लिए टेक्स्ट इनपुट

वेब कॉम्पोनेंट क्या हैं?

वेब कॉम्पोनेंट की मदद से, अपनी पसंद के मुताबिक, फिर से इस्तेमाल किए जा सकने वाले, एन्क्रिप्ट किए गए एचटीएमएल टैग बनाए जा सकते हैं. इन टैग का इस्तेमाल वेब ऐप्लिकेशन के एचटीएमएल में कहीं भी किया जा सकता है. ये सभी मॉडर्न ब्राउज़र पर काम करते हैं और यूज़र इंटरफ़ेस (यूआई) और फ़ंक्शन को एनकैप्सुलेट करने के लिए, फ़्रेमवर्क-एग्नोस्टिक तरीके का इस्तेमाल करते हैं.

प्लेस पिकर कॉम्पोनेंट क्या है?

जगह चुनने वाला कॉम्पोनेंट एक टेक्स्ट इनपुट होता है. इसकी मदद से असली उपयोगकर्ता, अपने-आप पूरा होने की सुविधा का इस्तेमाल करके किसी खास पते या जगह को खोज सकते हैं.

एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी क्या होती है?

Google Maps Platform की एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी, वेब कॉम्पोनेंट का एक सेट है. इसकी मदद से, डेवलपर कम मेहनत और तेज़ी से मैप और जगह की जानकारी से जुड़ी सुविधाओं को बना सकते हैं. यह बॉयलरप्लेट कोड, सबसे सही तरीकों, और रिस्पॉन्सिव डिज़ाइन को शामिल करता है. इससे जटिल मैप इंटरफ़ेस को एक ही एचटीएमएल एलिमेंट में बदल दिया जाता है. कुल मिलाकर, ये कॉम्पोनेंट मैप और जगह की जानकारी से जुड़े कोड को पढ़ना, सीखना, पसंद के मुताबिक बनाना, और मैनेज करना आसान बनाते हैं.

शुरू करें

शुरू करने के लिए, npm के साथ एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी लोड करें.

सबसे अच्छी परफ़ॉर्मेंस के लिए, पैकेज मैनेजर का इस्तेमाल करें और सिर्फ़ अपनी ज़रूरत के कॉम्पोनेंट इंपोर्ट करें. इस पैकेज को एनपीएम पर @googlemaps/extended-comp-library के तौर पर लिस्ट किया गया है. इसे इसके साथ इंस्टॉल करें:

  npm i @googlemaps/extended-component-library;

इसके बाद, अपने ऐप्लिकेशन में इस्तेमाल किए जाने वाले कॉम्पोनेंट इंपोर्ट करें.

  import '@googlemaps/extended-component-library/place_picker.js';

एनपीएम लाइब्रेरी लोड होने के बाद, Cloud Console से एपीआई पासकोड पाएं.

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>

जगह पिकर कॉम्पोनेंट टैग का इस्तेमाल करें.

  <gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%">
  </gmpx-place-picker>

ज़्यादा जानकारी के लिए, GitHub या npm देखें. सैंपल कोड में इस्तेमाल किए गए कॉम्पोनेंट देखने के लिए, GitHub पर उदाहरण पेज पर जाएं.

स्थान ऑटोकंप्लीट (झलक)

ज़रूरी शर्तें

नया क्या है

ऑटोकंप्लीट विजेट जोड़ना

किसी वेब पेज में ऑटोकंप्लीट विजेट जोड़ना

TypeScript

JavaScript

मैप में ऑटोकंप्लीट विजेट जोड़ना

TypeScript

JavaScript

ऑटोकंप्लीट की सुविधा के सुझावों को सीमित करें

देश के हिसाब से जगह खोजने पर पाबंदी लगाएं

जगह की खोज को मैप की सीमाओं तक सीमित करें

पूर्वाग्रह की जगह के बारे में खोज के नतीजे

किसी खास तरह की जगह से जुड़े खोज के नतीजों को सीमित करें

स्थान विवरण पाएं

TypeScript

JavaScript

TypeScript

JavaScript

चुनी गई जगह के लिए जियोकोडिंग नतीजे पाएं

मैप के उदाहरण

ऑटोकंप्लीट एलिमेंट

TypeScript

JavaScript

सीएसएस

एचटीएमएल

सैंपल आज़माएं

ऑटोकंप्लीट मैप

TypeScript

JavaScript

सीएसएस

एचटीएमएल

सैंपल आज़माएं

प्लेस पिकर कॉम्पोनेंट का इस्तेमाल करना

वेब कॉम्पोनेंट क्या हैं?

प्लेस पिकर कॉम्पोनेंट क्या है?

एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी क्या होती है?

शुरू करें