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

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

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

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

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

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

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

এই উদাহরণ মানচিত্রটি দেখায় যে কীভাবে ক্যালিফোর্নিয়ার ত্রিনিদাদের স্থান আইডি পেতে একটি searchByText অনুরোধ করা হয় এবং তারপরে সীমানায় স্টাইল প্রয়োগ করা হয়:

টাইপস্ক্রিপ্ট 

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

    const { Place } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;
    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) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
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) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
index.js

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

টাইপস্ক্রিপ্ট 

let innerMap;
let featureLayer;
let center;

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

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

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

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

    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);

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

    const { Place } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;
    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) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
initMap();
index.ts

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

let innerMap;
let featureLayer;
let center;
async function initMap() {
    // 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(google.maps.FeatureType.LOCALITY);
    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) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
initMap();
index.js

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

প্লেস অটোকমপ্লিট উইজেটটি আপনার ব্যবহারকারীদের অঞ্চল অনুসন্ধান করার জন্য একটি সুবিধাজনক উপায় প্রদান করে। প্লেস অটোকমপ্লিট উইজেটটিকে শুধুমাত্র অঞ্চল ফেরত দেওয়ার জন্য কনফিগার করতে, 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")।
  • ব্যবহারকারীদের পর্যালোচনা ও ছবির মতো অন্যান্য দরকারি তথ্য সংগ্রহ করুন।

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

নিম্নলিখিত উদাহরণ ফাংশনটি প্রথমে 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
```