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

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

আকার এবং লাইন

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

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

পলিলাইন

আপনার ম্যাপে একটি লাইন আঁকতে, পলিলাইন ব্যবহার করুন। Polyline ক্লাসটি ম্যাপের উপর সংযুক্ত রেখাংশগুলোর একটি রৈখিক স্তর তৈরি করে। একটি Polyline অবজেক্টে LatLng অবস্থানগুলোর একটি অ্যারে থাকে এবং এটি একটি নির্দিষ্ট ক্রমে সেই অবস্থানগুলোকে সংযুক্ত করে একাধিক রেখাংশ তৈরি করে।

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

Polyline কনস্ট্রাক্টরটি এক সেট PolylineOptions গ্রহণ করে, যা লাইনের LatLng স্থানাঙ্ক নির্দিষ্ট করে, এবং এক সেট স্টাইল গ্রহণ করে যা পলিলাইনের দৃশ্যমান আচরণ সমন্বয় করে।

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

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

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

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

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

// 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) ব্যবহার করতে হবে।

নিম্নলিখিত উদাহরণটি ক্লিকের মাধ্যমে একটি পলিলাইন তৈরি করার পদ্ধতি প্রদর্শন করে (একটি শীর্ষবিন্দু যোগ করতে মানচিত্রে ক্লিক করুন)।

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

/**
 * 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 ক্লাসের সমন্বয়ে, আপনি আপনার ম্যাপে পলিলাইনগুলোর চেহারা ও অনুভূতির উপর যথেষ্ট নিয়ন্ত্রণ রাখতে পারেন। অ্যারো , ড্যাশড লাইন , কাস্টম সিম্বল এবং অ্যানিমেটেড সিম্বল সম্পর্কে তথ্যের জন্য Symbols অংশটি দেখুন।

বহুভুজ

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

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

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

একটি জটিল আকৃতি নির্ধারণ করতে, একাধিক পথবিশিষ্ট একটি বহুভুজ ব্যবহার করা হয়।

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

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

যেহেতু একটি বহুভুজীয় এলাকায় একাধিক পৃথক পথ থাকতে পারে, তাই Polygon অবজেক্টের paths প্রপার্টিটি MVCArray টাইপের একটি অ্যারে অফ অ্যারেস নির্দিষ্ট করে। প্রতিটি অ্যারে ক্রমানুসারে সাজানো LatLng স্থানাঙ্কের একটি পৃথক অনুক্রম নির্ধারণ করে।

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

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

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

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

// 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 মুছে ফেলে।

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

// 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

উদাহরণ দেখুন

একটি বহুভুজে একটি ছিদ্র করুন

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

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

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

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

// 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 প্রপার্টিটি সেট করতে পারেন।

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

// 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

উদাহরণ দেখুন

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

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

// 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 মতোই, কারণ এর কিনারার (স্ট্রোক) জন্য আপনি নিজস্ব রং, পুরুত্ব ও অস্বচ্ছতা এবং ভেতরের অংশের (ফিল) জন্য নিজস্ব রং ও অস্বচ্ছতা নির্ধারণ করতে পারেন। রংগুলো হেক্সাডেসিমেল নিউমেরিক এইচটিএমএল স্টাইলে উল্লেখ করতে হবে।

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

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

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

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

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

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

সিএসএস

/* 
 * 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>
    <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`	ব্যবহারকারী যখন আকৃতিটি টানা বন্ধ করে তখন এটি সক্রিয় হয়।

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