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

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

আকার ও লাইন

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

আপনি ম্যাপে বিভিন্ন আকার যোগ করতে পারবেন। শেপ হল ম্যাপের একটি অবজেক্ট, যা অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্কের সাথে যুক্ত। নিম্নলিখিত আকারগুলি উপলভ্য: লাইন, বহুভুজ, বৃত্ত এবং আয়তক্ষেত্র। এছাড়াও, আপনি শেপ কনফিগার করতে পারবেন যাতে ব্যবহারকারীরা সেগুলি এডিট বা টেনে আনতে পারেন অথবা জিওফেন্স ও নিরাপদ-জোন বাউন্ডারি চেক করতে Geometry লাইব্রেরির (google.maps.GeometryLibrary) সাথে শেপ একত্রিত করতে পারেন।

পলিলাইন

আপনার ম্যাপে লাইন আঁকতে, পলিলাইন ব্যবহার করুন। Polyline ক্লাস ম্যাপে কানেক্ট করা লাইন সেগমেন্টের একটি লিনিয়ার ওভারলে সংজ্ঞায়িত করে। Polyline অবজেক্টে LatLng লোকেশনের অ্যারে থাকে এবং এটি লাইন সেগমেন্টের সিরিজ তৈরি করে যা সেইসব লোকেশনকে একটি ক্রমিক সিকোয়েন্সে কানেক্ট করে।

পলিলাইন যোগ করুন

Polyline কনস্ট্রাক্টর PolylineOptions-এর একটি সেট নেয় যা লাইনের LatLng কোঅর্ডিনেট এবং পলিলিনের ভিজ্যুয়াল আচরণ অ্যাডজাস্ট করার জন্য স্টাইলের একটি সেট নির্দিষ্ট করে।

Polylineটি অবজেক্ট ম্যাপে সরলরেখার সেগমেন্টের সিরিজ হিসেবে আঁকা হয়েছে। লাইন তৈরি করার সময় PolylineOptions-এর মধ্যে লাইনের স্ট্রোকের জন্য আপনি কাস্টম রঙ, ওজন ও অস্বচ্ছতা নির্দিষ্ট করতে পারেন অথবা তৈরি করার পরে এইসব প্রপার্টি পরিবর্তন করতে পারেন। পলিলাইনে নিম্নলিখিত স্ট্রোক স্টাইল কাজ করে:

strokeColor, "#FFFFFF" ফর্ম্যাটের হেক্সাডেসিমেল HTML রঙ নির্দিষ্ট করে। Polyline ক্লাসে নামযুক্ত রঙ কাজ করে না।
strokeOpacity লাইনের রঙের অস্বচ্ছতা নির্ধারণ করতে 0.0 এবং 1.0-এর মধ্যে একটি সংখ্যাসূচক মান নির্দিষ্ট করে। ডিফল্ট হল 1.0।
strokeWeight পিক্সেলে লাইনের প্রস্থ নির্দিষ্ট করে।

পলিলাইনের editable প্রপার্টি নির্দিষ্ট করে যে ব্যবহারকারীরা আকৃতি এডিট করতে পারবেন কিনা। নিচে ব্যবহারকারী-এডিট করতে পারবেন এমন আকার দেখুন। একইভাবে, ব্যবহারকারীদের লাইন টেনে নিয়ে যাওয়ার অনুমতি দিতে আপনি draggable প্রপার্টি সেট করতে পারেন।

এই উদাহরণটি দুই-পিক্সেল-চওড়া লাল পলিলাইন তৈরি করে যা ওকল্যান্ড, CA এবং ব্রিসবেন, অস্ট্রেলিয়ার মধ্যে প্রথম ট্রান্স-প্যাসিফিক ফ্লাইটের পথ দেখায়।

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    const { Polyline } = await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;

    const flightPlanCoordinates = [
        { lat: 37.772, lng: -122.214 },
        { lat: 21.291, lng: -157.821 },
        { lat: -18.142, lng: 178.431 },
        { lat: -27.467, lng: 153.027 },
    ];
    const flightPath = new Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
    });

    flightPath.setMap(innerMap);
}

void init();index.ts

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

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    const { Polyline } = await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;

    const flightPlanCoordinates = [
        { lat: 37.772, lng: -122.214 },
        { lat: 21.291, lng: -157.821 },
        { lat: -18.142, lng: 178.431 },
        { lat: -27.467, lng: 153.027 },
    ];
    const flightPath = new Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
    });

    flightPath.setMap(innerMap);
}

void init();index.js

উদাহরণ দেখুন

পলিলাইন সরিয়ে দেওয়া

ম্যাপ থেকে পলিলাইন সরাতে, আর্গুমেন্ট হিসেবে null পাস করে setMap() মেথড কল করুন। নিচের উদাহরণে, flightPath হল একটি পলিলাইন অবজেক্ট:

flightPath.setMap(null);

মনে রাখবেন যে উপরের পদ্ধতিটি পলিলাইন মুছে দেয় না। এটি ম্যাপ থেকে পলিলাইন সরিয়ে দেয়। পরিবর্তে আপনি যদি পলিলাইন মুছে দিতে চান, তাহলে আপনাকে এটি ম্যাপ থেকে সরাতে হবে এবং তারপরে পলিলাইনটি null-এ সেট করতে হবে।

পলিলাইন পরীক্ষা করা

পলিলাইন, LatLng অবজেক্টের অ্যারে হিসেবে স্থানাঙ্কের সিরিজ নির্দিষ্ট করে। এইসব কোঅর্ডিনেট লাইনের পাথ নির্ধারণ করে। স্থানাঙ্ক পেতে, getPath() কল করুন, যা MVCArray ধরনের অ্যারে রিটার্ন করবে। আপনি নিম্নলিখিত অপারেশন ব্যবহার করে অ্যারে ম্যানিপুলেট এবং পরিদর্শন করতে পারেন:

getAt() প্রদত্ত শূন্য-ভিত্তিক ইন্ডেক্স ভ্যালুতে LatLng রিটার্ন করে।
insertAt(), প্রদত্ত শূন্য-ভিত্তিক সূচক মান অনুযায়ী একটি পাস করা LatLng সন্নিবেশ করে। মনে রাখবেন যে সেই ইন্ডেক্স ভ্যালুতে আগে থেকে থাকা যেকোনও স্থানাঙ্ক এগিয়ে নিয়ে যাওয়া হয়।
removeAt() প্রদত্ত শূন্য-ভিত্তিক সূচক মান থেকে LatLng সরিয়ে দেয়।

মনে রাখবেন: আপনি mvcArray[i] সিনট্যাক্স ব্যবহার করে কোনও অ্যারের iতম এলিমেন্ট ফিরিয়ে আনতে পারবেন না। আপনাকে অবশ্যই mvcArray.getAt(i) ব্যবহার করতে হবে।

নিম্নলিখিত উদাহরণটি ক্লিক করার উপর ভিত্তি করে একটি পলিলাইন তৈরি করার পদ্ধতি দেখায় (ভার্টেক্স যোগ করতে ম্যাপে ক্লিক করুন)।

TypeScript

/**
 * This example creates an interactive map which constructs a polyline based on
 * user clicks. Note that the polyline only appears once its path property
 * contains two LatLng coordinates.
 */

let poly: google.maps.Polyline;
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Import the needed libraries.
    const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    innerMap = mapElement.innerMap;

    poly = new Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
    });
    poly.setMap(innerMap);

    // Handles click events on a map, and adds a new point to the Polyline.
    innerMap.addListener('click', (event: google.maps.MapMouseEvent) => {
        const latLng = event.latLng;
        if (!latLng) return;

        const path = poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(latLng);

        // Add a new marker at the new plotted point on the polyline.
        new AdvancedMarkerElement({
            position: latLng,
            title: '#' + path.getLength(),
            map: innerMap,
        });
    });
}

void init();index.ts

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

/**
 * This example creates an interactive map which constructs a polyline based on
 * user clicks. Note that the polyline only appears once its path property
 * contains two LatLng coordinates.
 */

let poly;
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Import the needed libraries.
    const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    innerMap = mapElement.innerMap;

    poly = new Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
    });
    poly.setMap(innerMap);

    // Handles click events on a map, and adds a new point to the Polyline.
    innerMap.addListener('click', (event) => {
        const latLng = event.latLng;
        if (!latLng) return;

        const path = poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(latLng);

        // Add a new marker at the new plotted point on the polyline.
        new AdvancedMarkerElement({
            position: latLng,
            title: '#' + path.getLength(),
            map: innerMap,
        });
    });
}

void init();index.js

উদাহরণ দেখুন

পলিলাইন কাস্টমাইজ করুন

আপনি প্রতীকের আকারে পলিলাইনে ভেক্টর-ভিত্তিক ছবি যোগ করতে পারেন। প্রতীক ও PolylineOptions ক্লাসের সংমিশ্রণের মাধ্যমে, আপনার ম্যাপে পলিলাইনের লুক ও ফিল আপনি অনেক বেশি নিয়ন্ত্রণ করতে পারবেন। তীর, ড্যাশ লাইন, কাস্টম প্রতীক এবং অ্যানিমেটেড প্রতীক সম্পর্কে তথ্যের জন্য প্রতীক দেখুন।

বহুভুজ

একটি বহুভুজ একটি বদ্ধ পথ (বা লুপ) দ্বারা ঘেরা একটি এলাকাকে উপস্থাপন করে, যা স্থানাঙ্কের একটি সিরিজ দ্বারা সংজ্ঞায়িত করা হয়। Polygon অবজেক্ট Polyline অবজেক্টের মতো কারণ এতে ক্রমানুসারে সাজানো স্থানাঙ্কের সিরিজ থাকে। স্ট্রোক ও ফিল ব্যবহার করে বহুভুজ আঁকা হয়। আপনি বহুভুজের প্রান্তের (স্ট্রোক) জন্য কাস্টম রঙ, ওয়েট এবং অস্বচ্ছতা এবং ঘেরা এলাকার (ফিল) জন্য কাস্টম রঙ এবং অস্বচ্ছতা নির্ধারণ করতে পারেন। রঙের নাম হেক্সাডেসিমেল HTML ফর্ম্যাটে উল্লেখ করতে হবে। রঙের নাম কাজ করে না।

Polygon অবজেক্ট জটিল আকার বর্ণনা করতে পারে, যার মধ্যে রয়েছে:

একটি বহুভুজ দ্বারা সংজ্ঞায়িত একাধিক অ-সংলগ্ন এলাকা।
গর্ত আছে এমন জায়গা।
এক বা একাধিক এলাকার ইন্টারসেকশন।

জটিল আকার সংজ্ঞায়িত করতে, আপনি একাধিক পাথ সহ বহুভুজ ব্যবহার করেন।

মনে রাখবেন: ডেটা লেয়ার পলিগন আঁকার সহজ উপায় প্রদান করে। এটি আপনার জন্য পলিগন ওয়াইন্ডিং ম্যানেজ করে, যার ফলে গর্ত সহ পলিগন আঁকা আরও সহজ হয়। ডেটা লেয়ারের ডকুমেন্টেশন দেখুন।

বহুভুজ যোগ করুন

যেহেতু একটি বহুভুজাকার এলাকায় একাধিক আলাদা আলাদা পাথ থাকতে পারে, তাই Polygon অবজেক্টের paths প্রপার্টি অ্যারের একটি অ্যারে নির্দিষ্ট করে, যার প্রতিটি MVCArray ধরনের। প্রতিটি অ্যারে, অর্ডার করা LatLng কোঅর্ডিনেটের আলাদা সিকোয়েন্স নির্ধারণ করে।

শুধুমাত্র একটি পাথ নিয়ে গঠিত সাধারণ পলিগনের জন্য, আপনি LatLng স্থানাঙ্কের একটি একক অ্যারে ব্যবহার করে Polygon তৈরি করতে পারেন। Maps JavaScript API, paths প্রপার্টির মধ্যে এটি সেভ করার সময়, কনস্ট্রাকশনের ভিত্তিতে সাধারণ অ্যারেকে অ্যারের অ্যারেতে কনভার্ট করবে। API একটি পাথ নিয়ে গঠিত বহুভুজের জন্য একটি সহজ getPath() পদ্ধতি প্রদান করে।

মনে রাখবেন: আপনি যদি এইভাবে একটি সাধারণ পলিগন তৈরি করেন, তাহলে আপনাকে এখনও MVCArray হিসেবে পাথ ম্যানিপুলেট করে পলিগন থেকে মানগুলি ফিরিয়ে আনতে হবে।

বহুভুজের editable প্রপার্টি ব্যবহারকারীরা আকৃতি এডিট করতে পারবেন কিনা তা নির্দিষ্ট করে। নিচে ব্যবহারকারী এডিট করতে পারবেন এমন শেপ দেখুন। একইভাবে, ব্যবহারকারীদের আকৃতি টেনে আনার অনুমতি দিতে আপনি draggable প্রপার্টি সেট করতে পারেন।

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

বহুভুজ অটো-কমপ্লিশন

উপরের উদাহরণে Polygon-এ চারটি LatLng কোঅর্ডিনেটের সেট আছে, তবে লক্ষ্য করুন যে প্রথম ও শেষ সেট একই লোকেশনকে চিহ্নিত করে, যা লুপ সম্পূর্ণ করে। তবে, বাস্তবে, যেহেতু বহুভুজ বন্ধ এলাকাকে সংজ্ঞায়িত করে, তাই আপনাকে শেষ সেটের স্থানাঙ্ক উল্লেখ করতে হবে না। Maps JavaScript API অটোমেটিক পলিগন সম্পূর্ণ করবে, এর জন্য এটি প্রদত্ত যেকোনও পাথের শেষ লোকেশন থেকে প্রথম লোকেশন পর্যন্ত স্ট্রোক আঁকবে।

নিচের উদাহরণটি আগেরটির মতোই, শুধু শেষের LatLng বাদ দেওয়া হয়েছে: উদাহরণ দেখুন।

বহুভুজ সরান

ম্যাপ থেকে পলিগন সরাতে, আর্গুমেন্ট হিসেবে null পাস করে setMap() মেথড কল করুন। নিচের উদাহরণে, bermudaTriangle হল একটি পলিগন অবজেক্ট:

bermudaTriangle.setMap(null);

মনে রাখবেন, উপরের পদ্ধতিটি পলিগন মুছে দেয় না। এটি ম্যাপ থেকে পলিগন সরিয়ে দেয়। পরিবর্তে আপনি যদি পলিগনটি মুছে ফেলতে চান, তাহলে আপনাকে এটি ম্যাপ থেকে সরাতে হবে এবং তারপরে পলিগনটি null-এ সেট করতে হবে।

একটি বহুভুজ পরীক্ষা করো

একটি বহুভুজ তার স্থানাঙ্কের সিরিজকে অ্যারের অ্যারে হিসেবে নির্দিষ্ট করে, যেখানে প্রতিটি অ্যারে MVCArray ধরনের হয়। প্রতিটি "লিফ" অ্যারে হল LatLng স্থানাঙ্কের একটি অ্যারে যা একটি একক পাথ নির্দিষ্ট করে। এইসব কোঅর্ডিনেট ফিরিয়ে আনতে, Polygon অবজেক্টের getPaths() পদ্ধতি কল করুন। যেহেতু অ্যারে হল একটি MVCArray, তাই আপনাকে নিম্নলিখিত অপারেশনগুলি ব্যবহার করে এটি ম্যানিপুলেট এবং পরিদর্শন করতে হবে:

getAt() প্রদত্ত শূন্য-ভিত্তিক ইন্ডেক্স ভ্যালুতে LatLng রিটার্ন করে।
insertAt(), প্রদত্ত শূন্য-ভিত্তিক সূচক মান অনুযায়ী একটি পাস করা LatLng সন্নিবেশ করে। মনে রাখবেন যে সেই ইন্ডেক্স ভ্যালুতে আগে থেকে থাকা যেকোনও স্থানাঙ্ক এগিয়ে নিয়ে যাওয়া হয়।
removeAt(), শূন্য-ভিত্তিক সূচক মান থেকে LatLng সরিয়ে দেয়।

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

বহুভুজে একটি গর্ত করুন

পলিগনের মধ্যে খালি জায়গা তৈরি করতে, আপনাকে দুটি পাথ তৈরি করতে হবে, একটি অন্যটির মধ্যে। গর্ত তৈরি করতে, ভিতরের পাথ নির্ধারণকারী কোঅর্ডিনেটগুলি অবশ্যই বাইরের পাথ নির্ধারণকারী কোঅর্ডিনেটগুলির বিপরীত ক্রমে হতে হবে। যেমন, বাইরের পথের স্থানাঙ্ক ঘড়ির কাঁটার দিকে হলে ভিতরের পথ অবশ্যই ঘড়ির কাঁটার বিপরীত দিকে হতে হবে।

মনে রাখবেন: ডেটা লেয়ার আপনার জন্য ভিতরের ও বাইরের পাথের ক্রম ম্যানেজ করে, যার ফলে গর্ত সহ বহুভুজ আঁকা সহজ হয়। ডেটা লেয়ারের জন্য ডকুমেন্টেশন দেখুন।

নিম্নলিখিত উদাহরণে দুটি পাথ সহ একটি পলিগন আঁকা হয়েছে, যেখানে ভিতরের পাথটি বাইরের পাথের বিপরীত দিকে ঘোরানো হয়েছে।

TypeScript

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

আয়তক্ষেত্র

Polygon ক্লাসের পাশাপাশি, Google Maps JavaScript API-তে Rectangle অবজেক্টের জন্য একটি নির্দিষ্ট ক্লাস অন্তর্ভুক্ত থাকে, যাতে তাদের কনস্ট্রাকশন সহজ করা যায়।

একটি আয়তক্ষেত্র যোগ করুন

Rectangle হল Polygon-এর মতো, যেখানে আপনি আয়তক্ষেত্রের প্রান্তের (স্ট্রোক) জন্য কাস্টম রঙ, ওয়েট ও অস্বচ্ছতা এবং আয়তক্ষেত্রের ভিতরের অংশের (ফিল) জন্য কাস্টম রঙ ও অস্বচ্ছতা নির্ধারণ করতে পারবেন। রঙের নাম হেক্সাডেসিমেল সংখ্যাসূচক HTML স্টাইলে উল্লেখ করতে হবে।

Polygon-এর মতো, আপনি Rectangle-এর জন্য paths নির্ধারণ করেন না। পরিবর্তে, একটি আয়তক্ষেত্রের একটি bounds প্রপার্টি রয়েছে যা একটি নির্দিষ্ট করে তার আকৃতি নির্ধারণ করে google.maps.LatLngBounds আয়তক্ষেত্রের জন্য।

আয়তক্ষেত্রের editable প্রপার্টি থেকে বোঝা যায় যে ব্যবহারকারীরা আকার এডিট করতে পারবেন কিনা। নিচে ব্যবহারকারী-এডিট করতে পারবেন এমন শেপ দেখুন। একইভাবে, ব্যবহারকারীদের আয়তক্ষেত্র টেনে নিয়ে যাওয়ার অনুমতি দিতে আপনি draggable প্রপার্টি সেট করতে পারেন।

TypeScript

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

ব্যবহারকারী ম্যাপে জুম পরিবর্তন করলেই নিম্নলিখিত কোডটি একটি আয়তক্ষেত্র তৈরি করে। ভিউ পোর্ট অনুযায়ী আয়তক্ষেত্রের সাইজ নির্ধারণ করা হয়।

TypeScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

একটি আয়তক্ষেত্র সরান

ম্যাপ থেকে আয়তক্ষেত্র সরাতে, null আর্গুমেন্ট হিসেবে পাস করে setMap() মেথড কল করুন।

rectangle.setMap(null);

মনে রাখবেন, উপরের পদ্ধতিটি আয়তক্ষেত্রটি মুছে দেয় না। এটি ম্যাপ থেকে আয়তক্ষেত্রটি সরিয়ে দেয়। পরিবর্তে আপনি যদি আয়তক্ষেত্রটি মুছে ফেলতে চান, তাহলে আপনাকে এটি ম্যাপ থেকে সরাতে হবে এবং তারপরে আয়তক্ষেত্রটি null-এ সেট করতে হবে।

সার্কেল

জেনেরিক Polygon ক্লাস ছাড়াও, Google Maps JavaScript API-তে Circle অবজেক্টের জন্য একটি নির্দিষ্ট ক্লাস অন্তর্ভুক্ত থাকে, যাতে তাদের কনস্ট্রাকশন সহজ করা যায়।

একটি বৃত্ত যোগ করুন

Circle হল Polygon-এর মতো, যেখানে আপনি বৃত্তের প্রান্তের (স্ট্রোক) জন্য কাস্টম রঙ, ওজন এবং অস্বচ্ছতা এবং বৃত্তের ভিতরের অংশের (ফিল) জন্য কাস্টম রঙ এবং অস্বচ্ছতা সংজ্ঞায়িত করতে পারেন। রঙ হেক্সাডেসিমেল সংখ্যাসূচক HTML স্টাইলে উল্লেখ করতে হবে।

Polygon-এর মতো, আপনি Circle-এর জন্য paths নির্ধারণ করেন না। পরিবর্তে, একটি বৃত্তের দুটি অতিরিক্ত বৈশিষ্ট্য রয়েছে যা এর আকারকে সংজ্ঞায়িত করে:

center বৃত্তের কেন্দ্রের google.maps.LatLng নির্দিষ্ট করে।
radius বৃত্তের ব্যাসার্ধ মিটারে নির্দিষ্ট করে।

সার্কেলের editable প্রপার্টি নির্দিষ্ট করে যে ব্যবহারকারীরা আকারটি এডিট করতে পারবেন কিনা। নিচে ব্যবহারকারী-এডিট করতে পারবেন এমন শেপ দেখুন। একইভাবে, ব্যবহারকারীদের সার্কেল টেনে নিয়ে যাওয়ার অনুমতি দিতে আপনি draggable প্রপার্টি সেট করতে পারেন।

নিম্নলিখিত উদাহরণে জাপানের কিয়োটোতে বিভিন্ন লোকেশনের মধ্যে আনুমানিক হাঁটার সময় দেখানোর জন্য বৃত্ত ব্যবহার করা হয়েছে। মেনু থেকে প্রয়োজনীয় দূরত্ব বেছে নিন, বৃত্তটি আবার কেন্দ্রে নিয়ে আসতে ম্যাপে ক্লিক করুন এবং বৃত্তটি টেনে এনে সেটির অবস্থান পরিবর্তন করুন।

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ Circle }, { AdvancedMarkerElement }, { event }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('core'),
        ]);

    // Set the initial map center point.
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

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

    // Get the buttons.
    const buttons = document.querySelectorAll('input[name="radius"]');

    // Create the circle.
    const walkingCircle = new Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    event.addListenerOnce(innerMap, 'tilesloaded', () => {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (changeEvent) => {
            const target = changeEvent.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener(
        'click',
        (
            mapsMouseEvent:
                google.maps.MapMouseEvent | google.maps.IconMouseEvent
        ) => {
            const newCenter = mapsMouseEvent.latLng;
            if (!newCenter) return;
            walkingCircle.setCenter(newCenter);
            centerMarker.position = newCenter;
            innerMap.panTo(newCenter);
        }
    );

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

void init();index.ts

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

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ Circle }, { AdvancedMarkerElement }, { event }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('core'),
        ]);

    // Set the initial map center point.
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

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

    // Get the buttons.
    const buttons = document.querySelectorAll('input[name="radius"]');

    // Create the circle.
    const walkingCircle = new Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    event.addListenerOnce(innerMap, 'tilesloaded', () => {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (changeEvent) => {
            const target = changeEvent.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        if (!newCenter) return;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

void init();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#control-panel {
    display: none; /* Set to 'display: block' after the map loads. */
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-family: 'Roboto', sans-serif;
    font-size: medium;
    margin: 10px;
    padding: 10px;
}style.css

HTML

<html>
    <head>
        <title>Circles</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="34.98956821576194, 135.74239981260283"
            zoom="15"
            map-id="DEMO_MAP_ID">
            <div id="control-panel" slot="control-inline-start-block-start">
                <input
                    id="short-walk"
                    type="radio"
                    name="radius"
                    value="400"
                    checked />
                <label for="short-walk">Short Walk (~5 minutes)</label><br />
                <input
                    id="medium-walk"
                    type="radio"
                    name="radius"
                    value="800" />
                <label for="medium-walk">Medium Walk (~15 minutes)</label><br />
                <input id="long-walk" type="radio" name="radius" value="1600" />
                <label for="long-walk">Long Walk (~30 minutes) </label>
            </div>
        </gmp-map>
    </body>
</html>index.html

উদাহরণ দেখুন

কোনও চেনাশোনা সরানো

ম্যাপ থেকে বৃত্ত সরাতে, আর্গুমেন্ট হিসেবে null পাস করে setMap() মেথড কল করুন।

circle.setMap(null);

মনে রাখবেন, উপরের পদ্ধতিটি সার্কেল মুছে দেয় না। এটি ম্যাপ থেকে সার্কেল সরিয়ে দেয়। পরিবর্তে আপনি যদি বৃত্তটি মুছে ফেলতে চান, তাহলে আপনাকে এটি ম্যাপ থেকে সরাতে হবে এবং তারপরে বৃত্তটিকেই null-এ সেট করতে হবে।

ব্যবহারকারী এডিট ও ড্র্যাগ করতে পারবেন এমন আকার

কোনও আকৃতি এডিট করার সুবিধা যোগ করলে, আকৃতিতে হ্যান্ডেল যোগ হয়, যা ব্যবহার করে ম্যাপে সরাসরি আকৃতির অবস্থান, আকৃতি ও সাইজ পরিবর্তন করা যায়। এছাড়াও, আপনি কোনও আকারকে ড্র্যাগ করার উপযুক্ত করে তুলতে পারেন, যাতে লোকজন ম্যাপে এটিকে অন্য কোনও জায়গায় সরাতে পারেন।

অবজেক্টে ব্যবহারকারীর করা পরিবর্তন সেশনগুলির মধ্যে থাকে না। আপনি ব্যবহারকারীর এডিট সেভ করতে চাইলে, আপনাকে অবশ্যই তথ্য ক্যাপচার ও স্টোর করতে হবে।

কোনও আকার এডিট করার উপযুক্ত করুন

যেকোনও আকার (পলিলাইন, পলিগন, বৃত্ত ও আয়তক্ষেত্র) ব্যবহারকারী এডিট করতে পারবেন হিসেবে সেট করা যেতে পারে, এর জন্য আকারের বিকল্পে editable-কে true হিসেবে সেট করতে হবে।

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

উদাহরণ দেখুন

কোনও আকৃতিকে ড্র্যাগেবল করা

ডিফল্ট হিসেবে, ম্যাপে আঁকা কোনও শেপের পজিশন স্থির থাকবে। ব্যবহারকারীদের ম্যাপের অন্য কোনও লোকেশনে কোনও আকার টেনে নিয়ে যাওয়ার অনুমতি দিতে, আকার সংক্রান্ত বিকল্পে draggable-কে true হিসেবে সেট করুন।

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

বহুভুজ বা পলিলাইনে টেনে আনার সুবিধা চালু করার সময়, আপনাকে বহুভুজ বা পলিলাইন জিওডেসিক করার কথাও বিবেচনা করতে হবে, এর জন্য আপনাকে geodesic প্রপার্টি true-এ সেট করতে হবে।

একটি জিওডেসিক বহুভুজ সরানো হলে তার আসল ভৌগোলিক আকৃতি বজায় রাখবে, যার ফলে মারকেটর প্রজেকশনে উত্তর বা দক্ষিণে সরানোর সময় বহুভুজটি বিকৃত দেখাবে। নন-জিওডেসিক পলিগন সবসময় স্ক্রিনে তাদের প্রাথমিক অবস্থায় থাকবে।

জিওডেসিক পলিলাইনে, পলিলাইনের অংশগুলি পৃথিবীর পৃষ্ঠের দুটি বিন্দুর মধ্যে সবচেয়ে ছোট পথ হিসাবে আঁকা হয়, ধরে নেওয়া হয় যে পৃথিবী একটি গোলক, মার্কেটর প্রজেকশনে সরল রেখার বিপরীতে।

স্থানাঙ্ক সিস্টেম সম্পর্কে আরও তথ্যের জন্য, ম্যাপ ও টাইল স্থানাঙ্ক সংক্রান্ত নির্দেশিকা দেখুন।

নিচের ম্যাপে প্রায় একই সাইজ ও ডাইমেনশনের দুটি ত্রিভুজ দেখানো হয়েছে। লাল ত্রিভুজের geodesic প্রপার্টি true-এ সেট করা আছে। এটি উত্তর দিকে সরার সাথে সাথে এর আকার কীভাবে পরিবর্তিত হয় তা লক্ষ্য করুন।

উদাহরণ দেখুন

এডিটিং ইভেন্ট শুনুন

কোনও শেপ এডিট করা হলে, এডিট সম্পূর্ণ হওয়ার পরে একটি ইভেন্ট ফায়ার করা হয়। এইসব ইভেন্ট নিচে তালিকাভুক্ত করা হয়েছে।

আকার	ইভেন্ট
সার্কেল করুন	`radius_changed` `center_changed`
বহুভুজ	`insert_at` `remove_at` `set_at` লিসেনারকে অবশ্যই পলিগনের পাথে সেট করতে হবে। বহুভুজের একাধিক পাথ থাকলে, প্রতিটি পাথে একটি লিসেনার সেট করতে হবে।
পলিলাইন	`insert_at` `remove_at` `set_at` লিসেনারকে অবশ্যই পলিলাইনের পাথে সেট করতে হবে।
আয়তক্ষেত্র	`bounds_changed`

কিছু উপযোগী কোড স্নিপেট:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

একটি আয়তক্ষেত্রে এডিটিং ইভেন্ট ম্যানেজ করার উদাহরণ দেখুন: উদাহরণ দেখুন।

ড্র্যাগিং ইভেন্ট শুনুন

কোনও আকার টেনে আনা হলে, টেনে আনার অ্যাকশন শুরু ও শেষ হওয়ার সময় এবং টেনে আনার সময় ইভেন্ট ট্রিগার করা হয়। পলিলাইন, পলিগন, বৃত্ত ও আয়তক্ষেত্রের জন্য নিম্নলিখিত ইভেন্টগুলি ফায়ার করা হয়।

ইভেন্ট	বিবরণ
`dragstart`	ব্যবহারকারী আকার টেনে নিয়ে যাওয়া শুরু করলে ফায়ার করা হয়।
`drag`	ব্যবহারকারী আকার টেনে আনার সময় বারবার ফায়ার করা হয়েছে।
`dragend`	ব্যবহারকারী আকার টেনে আনা বন্ধ করলে ফায়ার করা হয়।

ইভেন্ট ম্যানেজ করা সম্পর্কে আরও জানতে, ইভেন্ট সংক্রান্ত ডকুমেন্টেশন দেখুন।

জিওফেন্স ও নিরাপদ-জোন বাউন্ডারি

Google Maps Platform কোনও স্ট্যান্ডঅ্যালোন জিওফেন্সিং API প্রদান করে না। ওয়েব ম্যাপে জিওফেন্স ব্যাসার্ধ বা নিরাপদ জোন দেখাতে এবং লাইভ কোঅর্ডিনেট সেই সীমানার মধ্যে আছে কিনা তা চেক করতে, Geometry লাইব্রেরি (google.maps.GeometryLibrary) ব্যবহার করে আকার একত্রিত করুন, যা google.maps.importLibrary("geometry")-এর মাধ্যমে লোড করা হয়েছে:

বৃত্তাকার জিওফেন্স: একটি google.maps.Circle আঁকুন (অথবা একটি google.maps.CircleLiteral পাস করুন) এবং google.maps.geometry.poly.containsLocation() ব্যবহার করে স্থানাঙ্কটি বৃত্তের মধ্যে আছে কিনা তা পরীক্ষা করুন। এছাড়াও, আপনি যদি Circle.getCenter() থেকে মিটারে দূরত্ব জানতে চান, তাহলে google.maps.geometry.spherical.computeDistanceBetween()-এ কল করুন।
বহুভুজাকার জিওফেন্স: একটি google.maps.Polygon আঁকুন এবং google.maps.geometry.poly.containsLocation() ব্যবহার করে স্থানাঙ্কটি বহুভুজের মধ্যে আছে কিনা তা পরীক্ষা করুন।
3D ম্যাপ পলিগন: 3D ম্যাপে (আকার ও লাইন), একটি google.maps.maps3d.Polygon3DElement আঁকুন এবং google.maps.geometry.poly.containsLocation() কল করার সময় google.maps.Polygon-এ এর Polygon3DElement.path স্থানাঙ্ক পাস করুন।

নিচের উদাহরণে একটি বৃত্তাকার নিরাপদ জোন এবং একটি বহুভুজাকার জিওফেন্স আঁকা হয়েছে, তারপর লাইভ কোঅর্ডিনেট প্রতিটি সীমানার মধ্যে আছে কিনা তা চেক করা হয়েছে:

const {Circle, Polygon} = await google.maps.importLibrary("maps");
const {poly} = await google.maps.importLibrary("geometry");

const livePosition = {lat: 37.424, lng: -122.085};

// 1. Circular geofence (500-meter radius)
const circularGeofence = new Circle({
  map,
  center: {lat: 37.422, lng: -122.084},
  radius: 500,
});
const isInsideCircle = poly.containsLocation(livePosition, circularGeofence);

// 2. Polygonal geofence
const polygonGeofence = new Polygon({
  map,
  paths: [
    {lat: 37.420, lng: -122.088},
    {lat: 37.420, lng: -122.080},
    {lat: 37.426, lng: -122.080},
    {lat: 37.426, lng: -122.088},
  ],
});
const isInsidePolygon = poly.containsLocation(livePosition, polygonGeofence);