সীমানার জন্য ডেটা-ড্রিভেন স্টাইলিং সহ Places API এবং জিওকোডিং ব্যবহার করুন

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA)-এর ডেভেলপার

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

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

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

Places API ব্যবহার করুন

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

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

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

TypeScript

async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.setCenter(place.location!);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid: string) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}

জাভাস্ক্রিপ্ট

async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

TypeScript

let innerMap: google.maps.Map;
let featureLayer: google.maps.FeatureLayer;
let center: google.maps.LatLngLiteral;

async function init() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');

    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    void findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.setCenter(place.location!);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid: string) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Define the feature style function.
    featureLayer.style = (params: google.maps.FeatureStyleFunctionOptions) => {
        const placeFeature = params.feature as google.maps.PlaceFeature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();

জাভাস্ক্রিপ্ট

let innerMap;
let featureLayer;
let center;

async function init() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');

    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    void findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary('places');
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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) => {
        const placeFeature = params.feature;
        if (placeFeature.placeId === placeid) {
            return styleFill;
        }
        return null;
    };
}
void init();

অঞ্চল খুঁজতে 'জায়গা অটোমেটিক সম্পূর্ণ করা' ফিচার ব্যবহার করুন

জায়গা অটোমেটিক সম্পূর্ণ করার উইজেট ব্যবহারকারীদের অঞ্চল সার্চ করার সুবিধাজনক উপায় প্রদান করে। শুধু অঞ্চল দেখানোর জন্য 'জায়গা অটোমেটিক সম্পূর্ণ করা' উইজেট কনফিগার করতে, নিম্নলিখিত স্নিপেটে দেখানো অনুযায়ী includedPrimaryTypes-কে (regions)-এ সেট করুন:

// Set up the Autocomplete widget to return only region results.
placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
placeAutocomplete.includedPrimaryTypes = ['(regions)'];

কোনও অঞ্চলের জন্য জায়গার বিবরণ পাওয়া

কোনও অঞ্চলের জায়গার বিবরণ সংক্রান্ত ডেটা বেশ উপযোগী হতে পারে। যেমন, আপনি এগুলি করতে পারেন:

  • জায়গার নামের ভিত্তিতে বাউন্ডারি প্লেস আইডি সার্চ করুন।
  • কোনও সীমানায় জুম করার জন্য ভিউপোর্ট পান।
  • সীমানার জন্য ফিচার টাইপ পান (যেমন locality)।
  • ফর্ম্যাট করা ঠিকানা পান, যা মার্কিন যুক্তরাষ্ট্রের অঞ্চলে "জায়গার নাম, রাজ্য, দেশ" হিসেবে সমাধান করে (যেমন, "Ottumwa, IA, USA")।
  • ব্যবহারকারীর রিভিউ ও ফটোর মতো অন্যান্য প্রয়োজনীয় ডেটা পান।

নিম্নলিখিত উদাহরণ ফাংশনটি ত্রিনিদাদ, CA-এর সীমানা খুঁজে পায় এবং ফলাফলটিতে ম্যাপটি কেন্দ্র করে:

নিম্নলিখিত উদাহরণ ফাংশন fetchFields() কল করে place.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 data fields you want.
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'viewport', 'types'] });

        // Zoom to the boundary polygon.
        let viewport = place.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-এর সাহায্যে আপনি ঠিকানাকে ভৌগোলিক স্থানাঙ্কে এবং ভৌগোলিক স্থানাঙ্ককে ঠিকানায় পরিবর্তন করতে পারবেন। নিম্নলিখিত ব্যবহারগুলি সীমানার জন্য ডেটা-ড্রিভেন স্টাইলিংয়ের সাথে ভালভাবে একত্রিত হয়:

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

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

জিওকোডিং পরিষেবা কোনও জায়গার আইডি নিয়ে ভিউপোর্ট দেখাতে পারে, যা আপনি 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)
        });
}

রিভার্স জিওকোডিং ব্যবহার করুন

প্লেস আইডি খুঁজতে রিভার্স জিওকোডিং ব্যবহার করা যেতে পারে। নিম্নলিখিত উদাহরণে Geocoding পরিষেবা ফাংশন নির্দিষ্ট অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্কে সব ঠিকানা উপাদানের জন্য প্লেস আইডি রিটার্ন করে:

// 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
```