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

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

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

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

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

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

कोई क्षेत्र ढूंढने के लिए, टेक्स्ट सर्च (नई सुविधा) का इस्तेमाल करना

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

इस उदाहरण में, त्रिनिदाद, कैलिफ़ोर्निया के लिए जगह का आईडी पाने के लिए 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 के अपने-आप पूरे होने वाले विजेट को सिर्फ़ इलाके पर वापस लाना है, तो types को (regions) पर सेट करें, जैसा कि इस स्निपेट में दिखाया गया है:

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

किसी क्षेत्र के लिए जगह की जानकारी पाएं

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

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

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

नीचे दिए गए उदाहरण में, जगह की जानकारी पाने के लिए 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 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