স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

সীমানার জন্য ডেটা-ড্রিভেন স্টাইলিং সহ 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 অনুরোধ ব্যবহার করে জায়গা সম্পর্কে তথ্য প্রদান করে।
জিওকোডিং পরিষেবা এবং Geocoder ক্লাস, ব্যবহারকারীর ইনপুট থেকে ডায়নামিক জিওকোড ও রিভার্স জিওকোড করতে পারে।
Geocoding API আপনাকে স্ট্যাটিক, পরিচিত ঠিকানা জিওকোড করতে দেয়।

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

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

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

এই উদাহরণ ম্যাপে, ক্যালিফোর্নিয়ার ট্রিনিডাদের জন্য 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;
    };
}index.ts

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

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;
    };
}index.js

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

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();index.ts

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

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();index.js

অঞ্চল খুঁজতে Places Autocomplete ব্যবহার করা

প্লেস অটোকমপ্লিট উইজেট আপনার ব্যবহারকারীদের অঞ্চল সার্চ করার একটি সুবিধাজনক উপায় প্রদান করে। শুধুমাত্র অঞ্চল রিটার্ন করার জন্য Place Autocomplete উইজেট কনফিগার করতে, নিচের স্নিপেটে দেখানো 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
```