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

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

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

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

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

ध्यान दें: Geocoding API, कुल एपीआई, और जगहें एपीआई (नया) (टेक्स्ट सर्च (नया) के लिए) चालू होनी चाहिए. इन्हें Maps JavaScript API से अलग से बिल किया जाना चाहिए.

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

किसी इलाके को ढूंढने के लिए, टेक्स्ट सर्च (नया) का इस्तेमाल करना

Text Search (नया) का इस्तेमाल करके, ऐसा जगह आईडी पाएं जिसमें इलाके का डेटा शामिल हो. इसके लिए, 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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: प्रीव्यू रिलीज़ के दौरान, हर प्रोजेक्ट के लिए ज़्यादा से ज़्यादा 10 क्वेरी चलाई जा सकती हैं. ज़्यादा जानें.

इलाके खोजने के लिए, 'जगहें ऑटोकंप्लीट' सुविधा का इस्तेमाल करना

जगहों के अपने-आप पूरे होने वाले विजेट की मदद से, उपयोगकर्ता आसानी से इलाकों की खोज कर सकते हैं. 'जगहें अपने-आप पूरा होने' वाले विजेट को सिर्फ़ इलाके दिखाने के लिए कॉन्फ़िगर करने के लिए, 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".
• अन्य ज़रूरी डेटा पाएं, जैसे कि फ़ोटो.

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

नीचे दिया गया उदाहरण फ़ंक्शन, 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);
    }

जियोकोडिंग एपीआई का इस्तेमाल करना

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

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