सीमाओं के लिए डेटा-ड्रिवन स्टाइल के साथ 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 का इस्तेमाल करके, इलाके का टाइप तय करें. सिर्फ़ जगह के आईडी का अनुरोध करने के लिए, टेक्स्ट से खोजें (नया) एपीआई का इस्तेमाल करने पर कोई शुल्क नहीं लिया जाएगा. ज़्यादा जानें.

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

TypeScript

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

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

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

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

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}

JavaScript

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

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}

उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखें

TypeScript

let innerMap: google.maps.Map;
let featureLayer: google.maps.FeatureLayer;
let center: google.maps.LatLngLiteral;

async function init() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');

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

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

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

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

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

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

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();

JavaScript

let innerMap;
let featureLayer;
let center;

async function init() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');

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

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

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

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();

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

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

// Set up the Autocomplete widget to return only region results.
placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
placeAutocomplete.includedPrimaryTypes = ['(regions)'];

किसी देश या इलाके के लिए, जगह की जानकारी पाना

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

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

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

यहां दिए गए उदाहरण में, फ़ंक्शन fetchFields() को कॉल करता है, ताकि जगह की जानकारी मिल सके. इसमें place.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', 'viewport', 'types'] });

        // Zoom to the boundary polygon.
        let viewport = place.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)
        });
}

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

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

// 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

अगले उदाहरण में, जियोकोडिंग सेवा का इस्तेमाल करने का तरीका बताया गया है. इसमें रिवर्स जियोकोडिंग के साथ कॉम्पोनेंट से जुड़ी पाबंदियां जोड़ी गई हैं, ताकि सिर्फ़ 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
```