सीमाओं के लिए डेटा-ड्रिवन स्टाइल के साथ Places API और जियोकोडिंग का इस्तेमाल करना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

यूरोपियन इकनॉमिक एरिया (ईईए) के डेवलपर

Maps JavaScript API में Places API और Geocoding API का इस्तेमाल करके, इलाकों को खोजा जा सकता है. साथ ही, जगहों के बारे में ज़्यादा जानकारी पाई जा सकती है. जगह के आईडी पाने के लिए, Geocoding API और Places API बेहतर और भरोसेमंद विकल्प हैं. अगर आपने पहले से ही जगह के आईडी का इस्तेमाल किया है, तो सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग के साथ उन आईडी का फिर से इस्तेमाल आसानी से किया जा सकता है.

Maps JavaScript API के ऐप्लिकेशन में, Places और Geocoding को इन तरीकों से जोड़ें:

  • Places Library, Maps JavaScript API, आपके ऐप्लिकेशन को जगहों को खोजने की सुविधा देता है. इसमें ऑटोकंप्लीट विजेट भी शामिल होता है.
  • Places API, एचटीटीपी अनुरोधों का इस्तेमाल करके जगहों के बारे में जानकारी देता है.
  • जियोकोडिंग सेवा और Geocoder क्लास, उपयोगकर्ता के इनपुट से जियोकोड और रिवर्स जियोकोड कर सकते हैं.
  • Geocoding API की मदद से, स्टैटिक और जाने-पहचाने पतों को जियोकोड किया जा सकता है.

Places API का इस्तेमाल करना

किसी जगह को खोजने के लिए, टेक्स्ट खोज (नया) का इस्तेमाल करना

टेक्स्ट खोज (नई) का इस्तेमाल करके, जगह का आईडी पाया जा सकता है. इसमें क्षेत्र का डेटा शामिल होता है. इसके लिए, includedType का इस्तेमाल करके, क्षेत्र का टाइप तय करें. जगह के आईडी का अनुरोध करने के लिए, Text Search (New) API का इस्तेमाल करने पर कोई शुल्क नहीं लगेगा. ज़्यादा जानें.

इस उदाहरण मैप में, ट्रिनिडाड, कैलिफ़ोर्निया के लिए जगह का आईडी पाने के लिए searchByText अनुरोध करने का तरीका दिखाया गया है. इसके बाद, सीमा पर स्टाइल लागू करने का तरीका दिखाया गया है:

TypeScript

async function findBoundary() {
    const request = {
        query: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    //@ts-ignore
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        map.setCenter(place.location);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5
    };

    // Define the feature style function.
    featureLayer.style = (params) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
index.ts

JavaScript

async function findBoundary() {
  const request = {
    query: "Trinidad, CA",
    fields: ["id", "location"],
    includedType: "locality",
    locationBias: center,
  };
  const { Place } = await google.maps.importLibrary("places");
  //@ts-ignore
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];

    styleBoundary(place.id);
    map.setCenter(place.location);
  } else {
    console.log("No results");
  }
}

function styleBoundary(placeid) {
  // Define a style of transparent purple with opaque stroke.
  const styleFill = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Define the feature style function.
  featureLayer.style = (params) => {
    if (params.feature.placeId == placeid) {
      return styleFill;
    }
  };
}

index.js

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

TypeScript

let map;
let featureLayer;
let center;

async function initMap() {
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

    center = {lat: 41.059, lng: -124.151}; // Trinidad, CA

    map = new Map(document.getElementById('map') as HTMLElement, {
        center: center,
        zoom: 15,
        // In the cloud console, configure this Map ID with a style that enables the
        // "Locality" Data Driven Styling type.
        mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
    });

    featureLayer = map.getFeatureLayer('LOCALITY');

    findBoundary();
}
async function findBoundary() {
    const request = {
        query: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    //@ts-ignore
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        map.setCenter(place.location);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5
    };

    // Define the feature style function.
    featureLayer.style = (params) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
initMap();
index.ts

JavaScript

let map;
let featureLayer;
let center;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA
  map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 15,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" Data Driven Styling type.
    mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
  });
  featureLayer = map.getFeatureLayer("LOCALITY");
  findBoundary();
}

async function findBoundary() {
  const request = {
    query: "Trinidad, CA",
    fields: ["id", "location"],
    includedType: "locality",
    locationBias: center,
  };
  const { Place } = await google.maps.importLibrary("places");
  //@ts-ignore
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];

    styleBoundary(place.id);
    map.setCenter(place.location);
  } else {
    console.log("No results");
  }
}

function styleBoundary(placeid) {
  // Define a style of transparent purple with opaque stroke.
  const styleFill = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Define the feature style function.
  featureLayer.style = (params) => {
    if (params.feature.placeId == placeid) {
      return styleFill;
    }
  };
}

initMap();
index.js

जगहों के नाम के शुरुआती अक्षर लिखने पर पूरा नाम अपने-आप भरने की सुविधा का इस्तेमाल करके क्षेत्र ढूंढना

जगहों के नाम अपने-आप पूरे होने की सुविधा देने वाला विजेट उपयोगकर्ताओं को इलाकों के नाम खोजने का आसान तरीका उपलब्ध कराता है. सिर्फ़ क्षेत्र की जानकारी दिखाने के लिए, Places Autocomplete विजेट को कॉन्फ़िगर करने के लिए, types को (regions) पर सेट करें. ऐसा नीचे दिए गए स्निपेट में दिखाया गया है:

// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
  fields: ["place_id", "type"],
  strictBounds: false,
  types: ["(regions)"],
};

किसी इलाके की जगह की जानकारी पाना

किसी इलाके की जगह की जानकारी का डेटा बहुत काम का हो सकता है. उदाहरण के लिए:

  • जगह के नाम के आधार पर, सीमा के प्लेस आईडी खोजें.
  • किसी सीमा पर ज़ूम करने के लिए व्यूपोर्ट पाएं.
  • सीमा के लिए सुविधा का टाइप पाएं (उदाहरण के लिए, locality).
  • फ़ॉर्मैट किया गया पता पाएं, जो अमेरिका में "जगह का नाम, राज्य, देश" के तौर पर दिखता है. उदाहरण के लिए, "ओटमवा, आयोवा, अमेरिका".
  • फ़ोटो जैसे अन्य काम का डेटा पाएं.

यहां दिए गए उदाहरण फ़ंक्शन में, कैलिफ़ोर्निया के ट्रिनिडाड शहर की सीमा का पता लगाया गया है. साथ ही, मैप को नतीजे के हिसाब से सेंटर किया गया है:

यहां दिए गए उदाहरण में, फ़ंक्शन fetchFields() को कॉल करके जगह की जानकारी पाने का तरीका बताया गया है. इसमें place.geometry.viewport भी शामिल है. इसके बाद, map.fitBounds() को कॉल करके, मैप को चुनी गई सीमा वाले पॉलीगॉन पर सेंटर किया जाता है.

    async function getPlaceDetails(placeId) {
        // Use place ID to create a new Place instance.
        const place = new google.maps.places.Place({
            id: placeId,
        });

        // Call fetchFields, passing the data fields you want.
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'geometry', 'type'] });

        // Zoom to the boundary polygon.
        let viewport = place.geometry.viewport;
        map.fitBounds(viewport, 155);

        // Print some place details to the console.
        const types = place.types;
        console.log("Feature type: " + types[0]);
        console.log("Formatted address: " + place.formattedAddress);
    }

Geocoding API का इस्तेमाल करना

Geocoding API की मदद से, पतों को भौगोलिक निर्देशांकों में बदला जा सकता है. इसके अलावा, भौगोलिक निर्देशांकों को पतों में भी बदला जा सकता है. सीमाओं के लिए डेटा पर आधारित स्टाइलिंग के साथ, इनका इस्तेमाल बेहतर तरीके से किया जा सकता है:

  • किसी इलाके के व्यूपोर्ट की जानकारी पाने के लिए, जियोकोडिंग का इस्तेमाल करें.
  • अपने जियोकोडिंग कॉल में कॉम्पोनेंट फ़िल्टरिंग लागू करें, ताकि आपको प्रशासनिक क्षेत्र 1-4, इलाके या पिन कोड के लिए जगह के आईडी मिल सकें.
  • अक्षांश/देशांतर के निर्देशांकों के हिसाब से जगह के आईडी ढूंढने के लिए, रिवर्स जियोकोडिंग का इस्तेमाल करें. इसके अलावा, किसी खास जगह के सभी कॉम्पोनेंट के लिए भी जगह के आईडी वापस पाएं.

किसी क्षेत्र के लिए व्यूपोर्ट पाना

जियोकोडिंग सेवा, किसी जगह का आईडी ले सकती है और व्यूपोर्ट दिखा सकती है. इस व्यूपोर्ट को map.fitBounds() फ़ंक्शन में पास किया जा सकता है, ताकि मैप पर किसी सीमा वाले पॉलीगॉन को ज़ूम किया जा सके. यहां दिए गए उदाहरण में, व्यूपोर्ट पाने के लिए जियोकोडिंग सेवा का इस्तेमाल करने और फिर map.fitBounds() को कॉल करने का तरीका दिखाया गया है:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
    geocoder
        .geocode({ placeId: placeid })
        .then(({ results }) => {
            map.fitBounds(results[0].geometry.viewport, 155);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

रिवर्स जियोकोडिंग का इस्तेमाल करना

जगह के आईडी ढूंढने के लिए, रिवर्स जियोकोडिंग का इस्तेमाल किया जा सकता है. यहां दिया गया उदाहरण, Geocoding सेवा के फ़ंक्शन का है. यह अक्षांश/देशांतर के दिए गए निर्देशांकों के हिसाब से, पते के सभी कॉम्पोनेंट के लिए जगह के आईडी दिखाता है:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API.
function getPlaceIds(latLng) {
    geocoder
        .geocode({ latLng })
        .then(({ results }) => {
            console.log('Geocoding result:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

यहां रिवर्स जियोकोडिंग वेब सर्विस कॉल का उदाहरण दिया गया है:

```html
https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930
```

किसी जगह के लिए, पते के कॉम्पोनेंट पाने के लिए, कॉम्पोनेंट फ़िल्टर करने की सुविधा के साथ रिवर्स जियोकोडिंग का इस्तेमाल करें. इसके लिए, आपको यहां दिए गए एक या उससे ज़्यादा टाइप चुनने होंगे:

  • administrativeArea
  • country
  • locality
  • postalCode

अगले उदाहरण फ़ंक्शन में, Geocoding सेवा का इस्तेमाल करके, रिवर्स जियोकोडिंग के साथ कॉम्पोनेंट की पाबंदियां जोड़ने का तरीका दिखाया गया है. इससे, सिर्फ़ locality टाइप के लिए, तय की गई जगह के सभी पते वाले कॉम्पोनेंट मिल जाते हैं:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

function getPlaceIdWithRestrictions(latLng) {
    geocoder
        .geocode({ latLng,
            componentRestrictions: {
              country: "US",
              locality: "chicago",
            },
        })
        .then(({ results }) => {
            console.log('Geocoding result with restriction:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
            console.log(results[0].address_components[1].types[0]);
            console.log(results[0].address_components[1].long_name);
        })
        .catch((e) => {
            console.log('getPlaceId Geocoder failed due to: ' + e)
        });
}

यह रिवर्स जियोकोडिंग वेब सर्विस कॉल के बराबर है:

```html
    https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality
```