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

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

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

Maps JavaScript API ऐप्लिकेशन में जगहें और जियोकोडिंग जोड़ने के लिए, इन तरीकों का इस्तेमाल करें:

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

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

कोई क्षेत्र ढूंढने के लिए, टेक्स्ट खोज (नया) का इस्तेमाल करना

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

इस उदाहरण वाले मैप में, कैलिफ़ोर्निया के ट्रिनिडाड के लिए प्लेस आईडी पाने के लिए 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

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

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

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

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

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

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

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

यहां दिए गए उदाहरण में, place.geometry.viewport के साथ-साथ जगह की जानकारी पाने के लिए fetchFields() फ़ंक्शन को कॉल किया जाता है. इसके बाद, चुने गए बॉर्डर पॉलीगॉन पर मैप को सेंटर करने के लिए 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 desired data fields.
        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)
        });
}

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

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

// 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)
        });
}

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

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)
        });
}

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

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