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

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

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

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

স্থান 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

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

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

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

নিম্নলিখিত উদাহরণ ফাংশন fetchFields() কল করে place.geometry.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 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);
    }

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

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

  • একটি অঞ্চলের জন্য ভিউপোর্ট পেতে জিওকোডিং ব্যবহার করুন।
  • প্রশাসনিক এলাকা 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