সীমানাগুলির জন্য ডেটা-চালিত স্টাইলিং সহ স্থান API এবং জিওকোডিং ব্যবহার করুন৷

অঞ্চল অনুসন্ধান করতে এবং স্থান সম্পর্কে আরও তথ্য পেতে আপনি Maps JavaScript API-তে Places API এবং Geocoding API ব্যবহার করতে পারেন। Geocoding API এবং Places API হল স্থান আইডি পাওয়ার জন্য শক্তিশালী এবং স্থিতিশীল বিকল্প। আপনি যদি ইতিমধ্যেই স্থান আইডি ব্যবহার করে থাকেন, তাহলে আপনি সহজেই সীমানার জন্য ডেটা-চালিত স্টাইলিং সহ সেই আইডিগুলি পুনরায় ব্যবহার করতে পারেন।

নিম্নলিখিত উপায়ে আপনার Maps JavaScript API অ্যাপগুলিতে স্থান এবং জিওকোডিং যোগ করুন:

• Places Library, Maps JavaScript API , আপনার অ্যাপকে স্থান অনুসন্ধান করতে সক্ষম করে এবং একটি স্বয়ংক্রিয়ভাবে সম্পূর্ণ উইজেট অন্তর্ভুক্ত করে।
• Places API HTTP অনুরোধ ব্যবহার করে স্থান সম্পর্কে তথ্য প্রদান করে।
• জিওকোডিং পরিষেবা এবং জিওকোডার ক্লাস ব্যবহারকারীর ইনপুট থেকে গতিশীলভাবে জিওকোড এবং বিপরীত জিওকোড করতে পারে।
• জিওকোডিং এপিআই আপনাকে স্থির, পরিচিত ঠিকানাগুলি জিওকোড করতে দেয়।

স্থান API ব্যবহার করুন

একটি অঞ্চল খুঁজে পেতে টেক্সট সার্চ (নতুন) ব্যবহার করুন

আপনি টেক্সট সার্চ (নতুন) ব্যবহার করে এমন একটি প্লেস আইডি পেতে পারেন যাতে রিজিওন ডেটা থাকে, includedType ব্যবহার করে রিটার্ন করার জন্য রিজিওনের ধরণ নির্দিষ্ট করুন। শুধুমাত্র প্লেস আইডি অনুরোধ করার জন্য টেক্সট সার্চ (নতুন) API ব্যবহারের জন্য কোনও চার্জ প্রযোজ্য হবে না। আরও জানুন ।

এই উদাহরণ মানচিত্রটি ত্রিনিদাদ, CA-এর জন্য স্থান আইডি পেতে searchByText অনুরোধ করার এবং তারপর সীমানায় শৈলী প্রয়োগ করার প্রমাণ দেয়:

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

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

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

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 Autocomplete ব্যবহার করুন

Places Autocomplete উইজেটটি আপনার ব্যবহারকারীদের অঞ্চল অনুসন্ধান করতে সাহায্য করার একটি সুবিধাজনক উপায় প্রদান করে। শুধুমাত্র অঞ্চলগুলি ফেরত দেওয়ার জন্য Places Autocomplete উইজেটটি কনফিগার করতে, নিম্নলিখিত স্নিপেটে দেখানো হিসাবে (regions) types সেট করুন:

// 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 data fields you want.
        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);
    }

জিওকোডিং এপিআই ব্যবহার করুন

জিওকোডিং এপিআই আপনাকে ঠিকানাগুলিকে ভৌগোলিক স্থানাঙ্কে রূপান্তর করতে দেয়, এবং তদ্বিপরীতভাবেও। নিম্নলিখিত ব্যবহারগুলি সীমানার জন্য ডেটা-চালিত স্টাইলিংয়ের সাথে ভালভাবে একত্রিত হয়:

• কোনও অঞ্চলের ভিউপোর্ট পেতে জিওকোডিং ব্যবহার করুন।
• প্রশাসনিক এলাকা ১-৪, এলাকা, অথবা পোস্টাল কোডের জন্য স্থান আইডি পেতে আপনার জিওকোডিং কলে কম্পোনেন্ট ফিল্টারিং প্রয়োগ করুন।
• অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক অনুসারে স্থান আইডি খুঁজে পেতে বিপরীত জিওকোডিং ব্যবহার করুন, অথবা এমনকি একটি নির্দিষ্ট স্থানে সমস্ত উপাদানের জন্য স্থান আইডি ফেরত দিন।

একটি অঞ্চলের ভিউপোর্ট পান

জিওকোডিং পরিষেবা একটি স্থান আইডি নিতে পারে এবং একটি ভিউপোর্ট ফেরত দিতে পারে, যা আপনি 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
```