আকার ও লাইন

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

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

পলিলাইন

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

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

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

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

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

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

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

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();

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

// 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();
উদাহরণ দেখুন

পলিলাইন সরানো

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

flightPath.setMap(null);

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

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

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

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

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

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();

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

/**
 * 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();
উদাহরণ দেখুন

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

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

বহুভুজ

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

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

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

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

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

একটি বহুভুজ যোগ করা

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

শুধুমাত্র একটি পাথ দিয়ে তৈরি সাধারণ বহুভুজের ক্ষেত্রে, আপনি LatLng কোঅর্ডিনেটের একটি অ্যারে ব্যবহার করে Polygon তৈরি করতে পারবেন। Maps JavaScript API, paths প্রপার্টির মধ্যে সেভ করার সময় সাধারণ অ্যারেটিকে কনস্ট্রাকশনের মাধ্যমে অ্যারের অ্যারেতে পরিবর্তন করবে। API-তে একটি পাথ দিয়ে তৈরি getPath() বহুভুজ আঁকার সহজ পদ্ধতি দেওয়া আছে।

ব্যবহারকারীরা শেপ এডিট করতে পারবেন কিনা তা পলিগনের 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;

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

// 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;
উদাহরণ দেখুন

Polygon অটো-কমপ্লিশন

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

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

বহুভুজ সরানো

ম্যাপ থেকে কোনও বহুভুজ সরাতে, setMap() method কল করুন এবং null আর্গুমেন্ট হিসেবে পাস করুন। নিচের উদাহরণে, 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;

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

// 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;
উদাহরণ দেখুন

বহুভুজে গর্ত করা

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

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

নিচের উদাহরণে দুটি পাথ সহ একটি বহুভুজ আঁকা হয়েছে, যেখানে ভিতরের পাথটি বাইরের পাথের বিপরীত দিকে ঘুরছে।

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;

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

// 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;
উদাহরণ দেখুন

আয়তক্ষেত্র

জেনেরিক 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;

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

// 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;
উদাহরণ দেখুন

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

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;

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

// 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;
উদাহরণ দেখুন

একটি আয়তাকার অংশ সরিয়ে দেওয়া

ম্যাপ থেকে একটি আয়তাকার অংশ সরাতে, setMap() মেথড কল করুন এবং null-কে আর্গুমেন্ট হিসেবে পাস করুন।

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();

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

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();

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;
}

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>
উদাহরণ দেখুন

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

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

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 ব্যবহারকারী কোনও শেপ ড্র্যাগ করা বন্ধ করলে ফায়ার করা হয়।

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