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

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

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

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

  • Location Library, Maps JavaScript API, आपके ऐप्लिकेशन को जगहें खोजने में मदद करता है. साथ ही, इसमें अपने-आप पूरा होने वाला विजेट भी शामिल होता है.
  • Location 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 का इस्तेमाल करना

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

  • किसी इलाके का व्यूपोर्ट पाने के लिए, जियोकोडिंग का इस्तेमाल करें.
  • एडमिनिस्ट्रेटिव एरिया 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