Maps Demo Key পান: Maps Demo Key-এর সাহায্যে কোনও খরচ ছাড়াই বাছাই করা Maps JavaScript API এবং Places UI Kit ফিচার ব্যবহার করে দেখুন—কোনও বিলিং তথ্য প্রয়োজন নেই।

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

ম্যাপের ধরন

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

এই ডকুমেন্ট থেকে আপনি Maps JavaScript API ব্যবহার করে কোন কোন ধরনের ম্যাপ দেখাতে পারবেন তা জানতে পারবেন। এইসব ম্যাপের তথ্য ধরে রাখতে API MapType অবজেক্ট ব্যবহার করে। MapType হল একটি ইন্টারফেস যা ম্যাপ টাইলসের ডিসপ্লে ও ব্যবহার এবং স্ক্রিন কোঅর্ডিনেট থেকে ওয়ার্ল্ড কোঅর্ডিনেটে (ম্যাপে) কোঅর্ডিনেট সিস্টেমের অনুবাদকে সংজ্ঞায়িত করে। প্রতিটি MapType-এ টাইল পুনরুদ্ধার ও রিলিজ করা এবং এর ভিজ্যুয়াল আচরণ নির্ধারণ করে এমন প্রপার্টি ম্যানেজ করার জন্য কয়েকটি পদ্ধতি থাকতে হবে।

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

ম্যাপের প্রাথমিক ধরন

Maps JavaScript API-তে চার ধরনের ম্যাপ উপলভ্য আছে। পরিচিত "পেইন্ট করা" রোড ম্যাপ টাইল ছাড়াও, Maps JavaScript API অন্যান্য ধরনের ম্যাপও সাপোর্ট করে।

Maps JavaScript API-তে নিম্নলিখিত ধরনের ম্যাপ উপলভ্য:

roadmap বেসম্যাপ লেবেল সহ ডিফল্ট রোড ম্যাপ ভিউ দেখায়।
satellite এরিয়াল ইমেজের উপর ভিত্তি করে ফটোরিয়েলিস্টিক ম্যাপ দেখায়।
hybrid বেসম্যাপ লেবেল সহ স্যাটেলাইট ম্যাপ ভিউ দেখায়।
terrain ভূদৃশ্য সংক্রান্ত তথ্যের ভিত্তিতে ফিজিক্যাল ম্যাপ দেখায়।

মনে রাখবেন: 3D Maps-এ শুধু satellite ও hybrid ধরনের ম্যাপ কাজ করে।

আপনি Map-এর মাধ্যমে ব্যবহার করা ম্যাপের ধরন পরিবর্তন করতে পারবেন। এর জন্য আপনাকে mapTypeId প্রপার্টি সেট করতে হবে। এটি আপনি কনস্ট্রাক্টরের মধ্যে Map options অবজেক্ট সেট করে অথবা ম্যাপের setMapTypeId() মেথড কল করে করতে পারবেন। mapTypeID প্রপার্টি ডিফল্ট হিসেবে roadmap-এ সেট করা থাকে।

নির্মাণের সময় mapTypeId সেট করা:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

mapTypeId ডায়নামিকভাবে পরিবর্তন করা:

map.setMapTypeId('terrain');

মনে রাখবেন যে আপনি আসলে ম্যাপের ধরন সরাসরি সেট করেন না, পরিবর্তে একটি শনাক্তকারী ব্যবহার করে MapType-এর রেফারেন্স দিতে এর mapTypeId সেট করেন। Maps JavaScript API ম্যাপ টাইপ রেজিস্ট্রি ব্যবহার করে, এই রেফারেন্সগুলি ম্যানেজ করার জন্য নিচে ব্যাখ্যা করা হয়েছে।

3D Maps

Maps JavaScript API-তে 3D ছবি কাজ করে। 2D ম্যাপের জন্য উপলভ্য অনেক অ্যাকশন ও কাস্টমাইজেশন ক্ষমতা 3D ম্যাপের জন্যও উপলভ্য।

3D ম্যাপের ওভারভিউ থেকে 3D ম্যাপ সম্পর্কে আরও জানুন।

নিচের উদাহরণে সান ফ্রান্সিসকোর 3D পার্সপেক্টিভ ভিউ দেখানো হয়েছে:

3D ম্যাপের ওভারভিউ থেকে 3D ম্যাপ সম্পর্কে আরও জানুন।

৪৫° ছবি (অননুমোদিত)

বন্ধ করা হয়েছে: ৩.৬৫ ভার্সন থেকে, যা মে ২০২৬-এ রিলিজ করা হয়েছে, Maps JavaScript API স্যাটেলাইট এবং হাইব্রিড ম্যাপের ধরন আর অটোমেটিক উচ্চ জুম লেভেলে ৪৫° ইমেজারিতে পরিবর্তন হয় না। যেখানে ৪৫° ছবি উপলভ্য, সেখানে ম্যাপে উপর থেকে নিচের দিকে স্যাটেলাইট ভিউ দেখানো হয়, এমনকি ব্যবহারকারী জুম-ইন করলেও। map.setTilt(45)-এ কল করাও কার্যকর নয়। যেসব গ্রাহক ও অ্যাপ্লিকেশন তাদের ব্যবহারের ক্ষেত্রে ৪৫° ইমেজের উপর নির্ভর করে, তাদের বিকল্পে পরিবর্তন করতে হবে, যেমন 3D ম্যাপ।

নিচের স্যাম্পেল থেকে বোঝা যাবে যে কীভাবে 3D ম্যাপ ব্যবহার করে সান ফ্রান্সিসকোর ৪৫° পার্সপেক্টিভ ভিউ পাওয়া যাবে:

TypeScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');
    const map = new Map3DElement({
        center: {
            lat: 37.789,
            lng: -122.401,
            altitude: 0,
        },
        range: 2200,
        tilt: 45,
        heading: 188,
    });
    map.mode = 'SATELLITE';
    document.body.append(map);
}

void init();index.ts

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

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');
    const map = new Map3DElement({
        center: {
            lat: 37.789,
            lng: -122.401,
            altitude: 0,
        },
        range: 2200,
        tilt: 45,
        heading: 188,
    });
    map.mode = 'SATELLITE';
    document.body.append(map);
}

void init();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#gmp-map-3d {
    height: 100%;
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}style.css

HTML

<html>
    <head>
        <title>3d map 45-degree perspective</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>
        <div id="map"></div>
    </body>
</html>index.html

উদাহরণ দেখুন

ম্যাপের ধরন সংক্রান্ত রেজিস্ট্রি পরিবর্তন করুন

ম্যাপের mapTypeId হল একটি স্ট্রিং শনাক্তকারী যা MapType-কে একটি অনন্য মানের সাথে যুক্ত করতে ব্যবহৃত হয়। প্রতিটি Map অবজেক্ট একটি MapTypeRegistry বজায় রাখে, যাতে সেই ম্যাপের জন্য উপলভ্য MapType-এর সংগ্রহ থাকে। এই রেজিস্ট্রি ব্যবহার করা হয় ম্যাপের MapType কন্ট্রোলে উপলভ্য ম্যাপের ধরন বেছে নিতে, যেমন।

আপনি ম্যাপ টাইপ রেজিস্ট্রি থেকে সরাসরি পড়েন না। পরিবর্তে, আপনি কাস্টম ম্যাপের ধরন যোগ করে এবং আপনার পছন্দের একটি স্ট্রিং শনাক্তকারীর সাথে সেগুলিকে যুক্ত করে রেজিস্ট্রি পরিবর্তন করেন। আপনি ম্যাপের প্রাথমিক ধরন পরিবর্তন বা সংশোধন করতে পারবেন না (যদিও ম্যাপের সাথে যুক্ত mapTypeControlOptions-এর উপস্থিতি পরিবর্তন করে আপনি ম্যাপ থেকে সেগুলি সরিয়ে দিতে পারবেন)।

নিম্নলিখিত কোডটি ম্যাপে শুধুমাত্র দুটি ম্যাপের ধরন দেখানোর জন্য ম্যাপ সেট করে এবং MapType ইন্টারফেসের প্রকৃত বাস্তবায়নে এই শনাক্তকারীর সাথে অ্যাসোসিয়েশন যোগ করার জন্য রেজিস্ট্রি পরিবর্তন করে।mapTypeControlOptions

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: ['roadmap', MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

সাজানো ম্যাপ

StyledMapType আপনাকে স্ট্যান্ডার্ড Google বেস ম্যাপের প্রেজেন্টেশন কাস্টমাইজ করতে দেয়, রাস্তা, পার্ক এবং বিল্ট-আপ এলাকার মতো এলিমেন্টের ভিজ্যুয়াল ডিসপ্লে পরিবর্তন করে ডিফল্ট ম্যাপের ধরন থেকে আলাদা স্টাইল দেখায়। StyledMapType শুধুমাত্র ডিফল্ট roadmap ম্যাপের ধরনকে প্রভাবিত করে।

StyledMapType সম্পর্কে আরও তথ্যের জন্য, এম্বেড করা JSON স্টাইল ঘোষণা ব্যবহার করা দেখুন।

।

কাস্টম ম্যাপের ধরন

Maps JavaScript API কাস্টম ম্যাপের ধরন দেখানো ও ম্যানেজ করার সুবিধা দেয়, যার ফলে আপনি নিজের ম্যাপের ছবি বা টাইল ওভারলে প্রয়োগ করতে পারেন।

Maps JavaScript API-এর মধ্যে বিভিন্ন ধরনের ম্যাপ প্রয়োগ করার সুবিধা আছে:

স্ট্যান্ডার্ড টাইল সেট যাতে এমন ছবি থাকে যা একসাথে সম্পূর্ণ কার্টোগ্রাফিক ম্যাপ তৈরি করে। এইসব টাইল সেটকে বেস ম্যাপের ধরনও বলা হয়। এই ধরনের ম্যাপ আগে থেকে থাকা ডিফল্ট ম্যাপের মতোই কাজ করে: roadmap, satellite, hybrid এবং terrain। আপনি ম্যাপের mapTypes অ্যারেতে আপনার কাস্টম ম্যাপের ধরন যোগ করতে পারেন যাতে Maps JavaScript API-এর মধ্যে UI আপনার কাস্টম ম্যাপের ধরনকে একটি স্ট্যান্ডার্ড ম্যাপের ধরন হিসেবে বিবেচনা করতে পারে (উদাহরণস্বরূপ, MapType কন্ট্রোলে এটি অন্তর্ভুক্ত করে)।
ইমেজ টাইল ওভারলে যা আগে থেকে থাকা বেস ম্যাপের উপরে দেখানো হয়। সাধারণত, এই ধরনের ম্যাপগুলি অতিরিক্ত তথ্য দেখানোর জন্য আগে থেকে থাকা ম্যাপের ধরনকে আরও উন্নত করতে ব্যবহার করা হয় এবং প্রায়শই নির্দিষ্ট লোকেশন এবং/অথবা জুম লেভেলে সীমাবদ্ধ থাকে। মনে রাখবেন যে এই টাইলগুলি স্বচ্ছ হতে পারে, যা আপনাকে আগে থেকে থাকা ম্যাপে ফিচার যোগ করার অনুমতি দেয়।
ছবি নয় এমন ম্যাপের ধরন, যা আপনাকে ম্যাপের তথ্য সবচেয়ে মৌলিক স্তরে ম্যানিপুলেট করতে দেয়।

এইসব বিকল্পের প্রতিটি এমন একটি ক্লাস তৈরির উপর নির্ভর করে যা MapType ইন্টারফেস প্রয়োগ করে। এছাড়াও, ImageMapType ক্লাস কিছু বিল্ট-ইন আচরণ প্রদান করে যা ইমেজ ম্যাপের ধরন তৈরি করা সহজ করে তোলে।

`MapType` ইন্টারফেস

MapType প্রয়োগ করে এমন ক্লাস তৈরি করার আগে, Google Maps কীভাবে কোঅর্ডিনেট নির্ধারণ করে এবং ম্যাপের কোন অংশ দেখাতে হবে তা সিদ্ধান্ত নেয়, সেটি বোঝা গুরুত্বপূর্ণ। আপনাকে যেকোনও বেস বা ওভারলে ম্যাপের ধরনের জন্য একই ধরনের লজিক প্রয়োগ করতে হবে। ম্যাপ ও টাইল স্থানাঙ্ক সংক্রান্ত নির্দেশিকা পড়ুন।

কাস্টম ম্যাপের ধরন অবশ্যই MapType ইন্টারফেস প্রয়োগ করতে হবে। এই ইন্টারফেস নির্দিষ্ট কিছু প্রপার্টি ও পদ্ধতি উল্লেখ করে যার মাধ্যমে API আপনার ম্যাপের ধরন(গুলি)-এ অনুরোধ শুরু করতে পারে যখন API নির্ধারণ করে যে বর্তমান ভিউপোর্ট ও জুম লেভেলে ম্যাপ টাইলস দেখানো প্রয়োজন। কোন টাইল লোড করতে হবে তা সিদ্ধান্ত নিতে আপনি এইসব অনুরোধ ম্যানেজ করেন।

মনে রাখবেন: এই ইন্টারফেস প্রয়োগ করার জন্য আপনি নিজের ক্লাস তৈরি করতে পারেন। অন্যথায়, আপনার কাছে মানানসই ছবি থাকলে, আপনি ImageMapType ক্লাস ব্যবহার করতে পারেন যা আগে থেকেই এই ইন্টারফেস প্রয়োগ করে।

MapType ইন্টারফেস প্রয়োগকারী ক্লাসগুলির জন্য আপনাকে নিম্নলিখিত প্রপার্টিগুলি সংজ্ঞায়িত এবং পূরণ করতে হবে:

tileSize (প্রয়োজনীয়) টাইলসের সাইজ নির্দিষ্ট করে (google.maps.Size ধরনের)। সাইজ অবশ্যই আয়তাকার হতে হবে যদিও বর্গাকার হওয়ার প্রয়োজন নেই।
maxZoom (প্রয়োজনীয়) এই ধরনের ম্যাপের টাইল দেখানোর জন্য সর্বাধিক জুম লেভেল নির্দিষ্ট করে।
minZoom (ঐচ্ছিক) এই ধরনের ম্যাপের টাইল দেখানোর জন্য ন্যূনতম জুম লেভেল নির্দিষ্ট করে। ডিফল্ট হিসেবে, এই ভ্যালু হল 0, যার অর্থ হল কোনও ন্যূনতম জুম লেভেল নেই।
name (ঐচ্ছিক) এই ম্যাপের ধরনের নাম উল্লেখ করে। আপনি যদি MapType কন্ট্রোলের মধ্যে এই ম্যাপের ধরন বেছে নিতে চান, তাহলে এই প্রপার্টি প্রয়োজন। ( কন্ট্রোল করার বিকল্প দেখুন।)
alt (ঐচ্ছিক) এই ম্যাপের ধরনের জন্য বিকল্প টেক্সট নির্দিষ্ট করে, যা হোভার টেক্সট হিসেবে দেখানো হয়। এই প্রপার্টি শুধুমাত্র তখনই প্রয়োজন যদি আপনি চান যে এই ম্যাপের ধরনটি MapType কন্ট্রোলের মধ্যে বেছে নেওয়া যায়। (কন্ট্রোল বিকল্প দেখুন।)

এছাড়াও, MapType ইন্টারফেস প্রয়োগকারী ক্লাসকে নিম্নলিখিত পদ্ধতি প্রয়োগ করতে হবে:

getTile() (প্রয়োজনীয়) কল করা হয় যখনই API নির্ধারণ করে যে ম্যাপে প্রদত্ত ভিউপোর্টের জন্য নতুন টাইল দেখানো প্রয়োজন। getTile() পদ্ধতিতে নিম্নলিখিত স্বাক্ষর থাকতে হবে:

getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

MapType-এর tileSize, minZoom ও maxZoom প্রপার্টি এবং ম্যাপের বর্তমান ভিউপোর্ট ও জুম লেভেলের উপর ভিত্তি করে API নির্ধারণ করে যে সেটিকে getTile() কল করতে হবে কিনা। এই পদ্ধতির হ্যান্ডলারকে একটি পাস করা কোঅর্ডিনেট, জুম লেভেল এবং DOM এলিমেন্ট সহ একটি HTML এলিমেন্ট রিটার্ন করতে হবে যার উপর টাইল ইমেজ যোগ করতে হবে।
যখনই API নির্ধারণ করে যে ম্যাপ থেকে কোনও টাইল সরাতে হবে কারণ সেটি আর দেখা যাচ্ছে না, তখনই releaseTile() (ঐচ্ছিক) কল করা হয়। এই পদ্ধতিতে নিম্নলিখিত স্বাক্ষর থাকতে হবে:

releaseTile(tile:Node)

সাধারণত, ম্যাপে যোগ করার সময় ম্যাপ টাইলসের সাথে অ্যাটাচ করা যেকোনও এলিমেন্ট সরানোর বিষয়টি আপনাকে ম্যানেজ করতে হবে। যেমন, আপনি ম্যাপ টাইল ওভারলেতে ইভেন্ট লিসনার অ্যাটাচ করে থাকলে, আপনাকে সেগুলি এখান থেকে সরিয়ে দিতে হবে।

getTile() পদ্ধতিটি একটি নির্দিষ্ট ভিউপোর্টের মধ্যে কোন টাইলগুলি লোড করতে হবে তা নির্ধারণ করার জন্য প্রধান কন্ট্রোলার হিসাবে কাজ করে।

বেস ম্যাপের ধরন

এইভাবে তৈরি করা ম্যাপের ধরনগুলি হয় স্বতন্ত্রভাবে অথবা ওভারলে হিসেবে অন্যান্য ম্যাপের ধরনের সাথে ব্যবহার করা যেতে পারে। স্ট্যান্ডঅ্যালোন ম্যাপের ধরনকে বেস ম্যাপের ধরন বলা হয়। আপনি হয়ত চাইবেন যে API এই ধরনের কাস্টম MapType-কে অন্য যেকোনও বর্তমান বেস ম্যাপ টাইপের (ROADMAP, TERRAIN, ইত্যাদি) মতো বিবেচনা করুক। এটি করতে, Map-এর mapTypes প্রপার্টিতে আপনার কাস্টম MapType যোগ করুন। এই প্রপার্টিটি MapTypeRegistry ধরনের।

নিচের কোডটি ম্যাপের টাইল স্থানাঙ্ক দেখানোর জন্য একটি বেস MapType তৈরি করে এবং টাইলগুলির একটি আউটলাইন আঁকে:

TypeScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType {
  tileSize: google.maps.Size;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }

  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }

  releaseTile(tile: HTMLElement): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
      streetViewControl: false,
      mapTypeId: "coordinate",
      mapTypeControlOptions: {
        mapTypeIds: ["coordinate", "roadmap"],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      },
    }
  );

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl =
      (map.getMapTypeId() as string) !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

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

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

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
    streetViewControl: false,
    mapTypeId: "coordinate",
    mapTypeControlOptions: {
      mapTypeIds: ["coordinate", "roadmap"],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    },
  });

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl = map.getMapTypeId() !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });
  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256)),
  );
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

ওভারলে ম্যাপের ধরন

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

এইসব ক্ষেত্রে, আপনি ম্যাপের ধরনকে আলাদা এন্টিটি হিসেবে নয়, বরং ওভারলে হিসেবে দেখতে চান। আপনি এটি করতে পারেন, Map-এর overlayMapTypes প্রপার্টি ব্যবহার করে সরাসরি আগে থেকে থাকা MapType-এ ম্যাপের ধরন যোগ করার মাধ্যমে। এই প্রপার্টিতে MapType-এর MVCArray আছে। সব ধরনের ম্যাপ (বেস ও ওভারলে) mapPane লেয়ারের মধ্যে রেন্ডার করা হয়। ওভারলে ম্যাপের ধরনগুলি যে বেস ম্যাপের সাথে অ্যাটাচ করা আছে, তার উপরে দেখানো হবে। Map.overlayMapTypes অ্যারেতে যে ক্রমে সেগুলি দেখানো হয়, সেই ক্রমেই দেখানো হবে (বেশি ইন্ডেক্স ভ্যালু সহ ওভারলেগুলি কম ইন্ডেক্স ভ্যালু সহ ওভারলেগুলির সামনে দেখানো হয়)।

নিম্নলিখিত উদাহরণটি আগেরটির মতোই, তবে আমরা ROADMAP ম্যাপ টাইপের উপরে একটি টাইল ওভারলে MapType তৈরি করেছি:

TypeScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType implements google.maps.MapType {
  tileSize: google.maps.Size;
  alt: string|null = null;
  maxZoom: number = 17;
  minZoom: number = 0;
  name: string|null = null;
  projection: google.maps.Projection|null = null;
  radius: number = 6378137;

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }
  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile: Element): void {}
}

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

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256))
  map.overlayMapTypes.insertAt(
    0,
    coordMapType
  );
}

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

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

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  alt = null;
  maxZoom = 17;
  minZoom = 0;
  name = null;
  projection = null;
  radius = 6378137;
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
  });
  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256));

  map.overlayMapTypes.insertAt(0, coordMapType);
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

ইমেজ ম্যাপের ধরন

বেস ম্যাপের ধরন হিসেবে কাজ করার জন্য MapType প্রয়োগ করা সময়সাপেক্ষ এবং শ্রমসাধ্য কাজ হতে পারে। API একটি বিশেষ ক্লাস প্রদান করে যা সবচেয়ে সাধারণ ম্যাপের ধরনের জন্য MapType ইন্টারফেস প্রয়োগ করে: ম্যাপের ধরন যাতে একক ছবির ফাইল দিয়ে তৈরি টাইলস থাকে।

এই ক্লাস, ImageMapType ক্লাস, ImageMapTypeOptions অবজেক্ট স্পেসিফিকেশন ব্যবহার করে তৈরি করা হয়েছে যা নিম্নলিখিত প্রয়োজনীয় প্রপার্টি সংজ্ঞায়িত করে:

tileSize (প্রয়োজনীয়) টাইলসের সাইজ নির্দিষ্ট করে (google.maps.Size ধরনের)। সাইজ অবশ্যই আয়তাকার হতে হবে যদিও বর্গাকার না হলেও চলবে।
getTileUrl (প্রয়োজনীয়) ফাংশন নির্দিষ্ট করে, সাধারণত ইনলাইন ফাংশন লিটারেল হিসেবে প্রদান করা হয়, প্রদান করা ওয়ার্ল্ড কোঅর্ডিনেট ও জুম লেভেলের উপর ভিত্তি করে সঠিক ইমেজ টাইল বেছে নেওয়ার বিষয়টি ম্যানেজ করার জন্য।

নিম্নলিখিত কোডটি Google-এর চাঁদের টাইলস ব্যবহার করে একটি বেসিক ImageMapType প্রয়োগ করে। এই উদাহরণে একটি নরমালাইজেশন ফাংশন ব্যবহার করা হয়েছে যাতে টাইলগুলি x-অক্ষ বরাবর পুনরাবৃত্তি হয়, কিন্তু আপনার ম্যাপের y-অক্ষ বরাবর নয়।

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 0, lng: 0 },
      zoom: 1,
      streetViewControl: false,
      mapTypeControlOptions: {
        mapTypeIds: ["moon"],
      },
    }
  );

  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom): string {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }

  return { x: x, y: y };
}

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["moon"],
    },
  });
  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;
  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }
  return { x: x, y: y };
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

পূর্বানুমান

পৃথিবী হল একটি ত্রিমাত্রিক গোলক (প্রায়), যেখানে ম্যাপ হল একটি ফ্ল্যাট দ্বিমাত্রিক সারফেস। Maps JavaScript API-তে আপনি যে ম্যাপ দেখতে পান, পৃথিবীর যেকোনও সমতল ম্যাপের মতো, সেটি হল সমতল সারফেসে সেই গোলকের প্রোজেকশন। সহজ কথায়, প্রোজেকশনকে প্রোজেকশনের ম্যাপে অক্ষাংশ/দ্রাঘিমাংশের মানকে কোঅর্ডিনেটে ম্যাপিং হিসেবে সংজ্ঞায়িত করা যেতে পারে।

Maps JavaScript API-তে প্রোজেকশন অবশ্যই Projection ইন্টারফেস প্রয়োগ করতে হবে। Projection প্রয়োগ করার সময় শুধু একটি কোঅর্ডিনেট সিস্টেম থেকে অন্যটিতে ম্যাপিং করলে চলবে না, বরং দ্বিমুখী ম্যাপিং করতে হবে। অর্থাৎ, আপনাকে অবশ্যই পৃথিবীর স্থানাঙ্ক (LatLng অবজেক্ট) থেকে Projection ক্লাসের ওয়ার্ল্ড স্থানাঙ্ক সিস্টেমে এবং ওয়ার্ল্ড স্থানাঙ্ক সিস্টেম থেকে আবার পৃথিবীর স্থানাঙ্কে কীভাবে অনুবাদ করতে হবে তা নির্ধারণ করতে হবে। Google Maps ভৌগোলিক ডেটা থেকে ম্যাপ তৈরি করতে এবং ম্যাপের ইভেন্টগুলিকে ভৌগোলিক কোঅর্ডিনেটে রূপান্তর করতে মার্কেটর প্রজেকশন ব্যবহার করে। আপনি Map-এ getProjection() কল করে এই প্রজেকশন পেতে পারেন (অথবা স্ট্যান্ডার্ড বেস MapType ধরনের যেকোনও একটি।) বেশিরভাগ ক্ষেত্রে, এই স্ট্যান্ডার্ড Projection যথেষ্ট, তবে আপনি নিজের কাস্টম প্রজেকশন সংজ্ঞায়িত ও ব্যবহার করতে পারেন।

প্রোজেকশন প্রয়োগ করা

কাস্টম প্রোজেকশন প্রয়োগ করার সময়, আপনাকে কয়েকটি জিনিস সংজ্ঞায়িত করতে হবে:

অক্ষাংশ ও দ্রাঘিমাংশ স্থানাঙ্ককে কার্টেসিয়ান সমতলে ম্যাপ করার সূত্র এবং কার্টেসিয়ান সমতল থেকে অক্ষাংশ ও দ্রাঘিমাংশ স্থানাঙ্কে ম্যাপ করার সংশ্লিষ্ট সূত্র। (Projection ইন্টারফেস শুধুমাত্র রেক্টিলিনিয়ার কোঅর্ডিনেটে ট্রান্সফর্মেশন সাপোর্ট করে।)
বেস টাইল সাইজ। সব টাইল আয়তাকার হতে হবে।
জুম লেভেল ০-তে সেট করা বেস টাইল ব্যবহার করে ম্যাপের "ওয়ার্ল্ড সাইজ"। মনে রাখবেন, জুম ০-তে একটি টাইল নিয়ে গঠিত ম্যাপের ক্ষেত্রে, পৃথিবীর সাইজ এবং বেস টাইলের সাইজ একই হয়।

প্রোজেকশনে কোঅর্ডিনেট ট্রান্সফর্মেশন

প্রতিটি প্রোজেকশন দুটি পদ্ধতি প্রদান করে যা এই দুটি কোঅর্ডিনেট সিস্টেমের মধ্যে অনুবাদ করে, আপনাকে ভৌগোলিক এবং বিশ্ব কোঅর্ডিনেটের মধ্যে রূপান্তর করার অনুমতি দেয়:

Projection.fromLatLngToPoint() পদ্ধতি LatLng ভ্যালুকে ওয়ার্ল্ড কোঅর্ডিনেটে কনভার্ট করে। ম্যাপে ওভারলে পজিশন করতে (এবং ম্যাপের পজিশন ঠিক করতে) এই পদ্ধতি ব্যবহার করা হয়।
Projection.fromPointToLatLng() পদ্ধতিটি একটি বিশ্ব স্থানাঙ্ককে একটি LatLng মানে রূপান্তর করে। এই পদ্ধতিটি ম্যাপে হওয়া ক্লিকের মতো ইভেন্টকে ভৌগোলিক কোঅর্ডিনেটে কনভার্ট করতে ব্যবহার করা হয়।

Google Maps ধরে নেয় যে প্রজেকশনগুলি রেক্টিলিনিয়ার।

সাধারণত, আপনি দুটি ক্ষেত্রে প্রোজেকশন ব্যবহার করতে পারেন: পৃথিবীর ম্যাপ তৈরি করতে অথবা স্থানীয় এলাকার ম্যাপ তৈরি করতে। প্রথম ক্ষেত্রে, আপনাকে নিশ্চিত করতে হবে যে আপনার প্রোজেকশনও রেক্টিলিনিয়ার এবং সব দ্রাঘিমাংশে স্বাভাবিক। কিছু প্রজেকশন (বিশেষ করে কনিক প্রজেকশন) "স্থানীয়ভাবে স্বাভাবিক" (যেমন, উত্তর দিক নির্দেশ করা) হতে পারে, কিন্তু প্রকৃত উত্তর দিক থেকে বিচ্যুত হতে পারে; যেমন, কোনও রেফারেন্স দ্রাঘিমাংশের সাপেক্ষে ম্যাপটি যত দূরে অবস্থান করে। আপনি স্থানীয়ভাবে এই ধরনের প্রজেকশন ব্যবহার করতে পারেন, তবে মনে রাখবেন যে প্রজেকশনটি অবশ্যই যথাযথ নয় এবং রেফারেন্স দ্রাঘিমাংশ থেকে আপনি যত দূরে সরে যাবেন, ট্রান্সফর্মেশন সংক্রান্ত সমস্যা তত বেশি স্পষ্ট হয়ে উঠবে।

প্রোজেকশনে ম্যাপ টাইল বেছে নেওয়া

প্রোজেকশন শুধু লোকেশন বা ওভারলের পজিশন নির্ধারণ করার জন্যই নয়, ম্যাপ টাইলের পজিশন নির্ধারণ করার জন্যও উপযোগী। Maps JavaScript API একটি MapType ইন্টারফেস ব্যবহার করে বেস ম্যাপ রেন্ডার করে, যা ম্যাপের প্রজেকশন শনাক্ত করার জন্য একটি projection প্রপার্টি এবং টাইল স্থানাঙ্ক মানের উপর ভিত্তি করে ম্যাপ টাইলগুলি ফিরিয়ে আনার জন্য একটি getTile() পদ্ধতি উভয়ই ঘোষণা করতে হবে। টাইল স্থানাঙ্ক আপনার বেসিক টাইল সাইজ (যা অবশ্যই আয়তাকার হতে হবে) এবং আপনার ম্যাপের "ওয়ার্ল্ড সাইজ" উভয়ের উপর ভিত্তি করে তৈরি হয়, যা জুম লেভেল ০-তে আপনার ম্যাপ ওয়ার্ল্ডের পিক্সেল সাইজ। (জুম ০-তে একটি টাইল নিয়ে গঠিত ম্যাপের ক্ষেত্রে, টাইল সাইজ ও ওয়ার্ল্ড সাইজ একই হয়।)

আপনি MapType-এর tileSize প্রপার্টির মধ্যে বেস টাইলের সাইজ নির্ধারণ করেন। আপনি নিজের প্রোজেকশনের fromLatLngToPoint() এবং fromPointToLatLng() মেথডের মধ্যে ওয়ার্ল্ড সাইজ ইমপ্লিসিটলি নির্ধারণ করেন।

যেহেতু ছবি বেছে নেওয়া এইসব পাস করা ভ্যালুর উপর নির্ভর করে, তাই এমন ছবির নাম দেওয়া উপযোগী যা এইসব পাস করা ভ্যালুর ভিত্তিতে প্রোগ্রাম্যাটিক্যালি বেছে নেওয়া যেতে পারে, যেমন map_zoom_tileX_tileY.png।

নিম্নলিখিত উদাহরণে ImageMapType সংজ্ঞায়িত করা হয়েছে Gall-Peters প্রোজেকশন ব্যবহার করে:

TypeScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request the needed libraries.
    await google.maps.importLibrary('maps');

    // Create a map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Set the Gall-Peters map type.
    const gallPetersMapType = await initGallPeters();
    innerMap.mapTypes.set('gallPeters', gallPetersMapType);
    innerMap.setMapTypeId('gallPeters');

    // Show the lat and lng under the mouse cursor.
    const coordsDiv = document.getElementById('coords')!;

    innerMap.addListener('mousemove', (event: google.maps.MapMouseEvent) => {
        coordsDiv.textContent = `lat: ${String(Math.round(event.latLng!.lat()))}, lng: ${String(Math.round(event.latLng!.lng()))}`;
    });

    // Add some markers to the map.
    innerMap.data.setStyle((feature) => {
        return {
            title: feature.getProperty('name') as string,
            optimized: false,
        };
    });
    innerMap.data.addGeoJson(cities);
}

async function initGallPeters(): Promise<google.maps.ImageMapType> {
    const [{ ImageMapType }, { Size, Point, LatLng }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    const GALL_PETERS_RANGE_X = 800;
    const GALL_PETERS_RANGE_Y = 512;

    // Fetch Gall-Peters tiles stored locally on our server.
    const gallPetersMapType = new ImageMapType({
        getTileUrl(coord, zoom) {
            const scale = 1 << zoom;

            // Wrap tiles horizontally.
            const x = ((coord.x % scale) + scale) % scale;

            // Don't wrap tiles vertically.
            const y = coord.y;

            if (y < 0 || y >= scale) return '';

            return `gall-peters_${String(zoom)}_${String(x)}_${String(y)}.png`;
        },
        tileSize: new Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
        minZoom: 0,
        maxZoom: 1,
        name: 'Gall-Peters',
    });

    // Describe the Gall-Peters projection used by these tiles.
    gallPetersMapType.projection = {
        fromLatLngToPoint(latLng: google.maps.LatLng) {
            const latRadians = (latLng.lat() * Math.PI) / 180;
            return new Point(
                GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
                GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
            );
        },
        fromPointToLatLng(point: google.maps.Point, noWrap?: boolean) {
            const x = point.x / GALL_PETERS_RANGE_X;
            const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

            return new LatLng(
                (Math.asin(1 - 2 * y) * 180) / Math.PI,
                -180 + 360 * x,
                noWrap
            );
        },
    };

    return gallPetersMapType;
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-87.65, 41.85] },
            properties: { name: 'Chicago' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-149.9, 61.218] },
            properties: { name: 'Anchorage' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-99.127, 19.427] },
            properties: { name: 'Mexico City' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-0.126, 51.5] },
            properties: { name: 'London' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [28.045, -26.201] },
            properties: { name: 'Johannesburg' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [15.322, -4.325] },
            properties: { name: 'Kinshasa' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [151.207, -33.867] },
            properties: { name: 'Sydney' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [0, 0] },
            properties: { name: '0°N 0°E' },
        },
    ],
};

void init();index.ts

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

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request the needed libraries.
    await google.maps.importLibrary('maps');

    // Create a map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Set the Gall-Peters map type.
    const gallPetersMapType = await initGallPeters();
    innerMap.mapTypes.set('gallPeters', gallPetersMapType);
    innerMap.setMapTypeId('gallPeters');

    // Show the lat and lng under the mouse cursor.
    const coordsDiv = document.getElementById('coords');

    innerMap.addListener('mousemove', (event) => {
        coordsDiv.textContent = `lat: ${String(Math.round(event.latLng.lat()))}, lng: ${String(Math.round(event.latLng.lng()))}`;
    });

    // Add some markers to the map.
    innerMap.data.setStyle((feature) => {
        return {
            title: feature.getProperty('name'),
            optimized: false,
        };
    });
    innerMap.data.addGeoJson(cities);
}

async function initGallPeters() {
    const [{ ImageMapType }, { Size, Point, LatLng }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    const GALL_PETERS_RANGE_X = 800;
    const GALL_PETERS_RANGE_Y = 512;

    // Fetch Gall-Peters tiles stored locally on our server.
    const gallPetersMapType = new ImageMapType({
        getTileUrl(coord, zoom) {
            const scale = 1 << zoom;

            // Wrap tiles horizontally.
            const x = ((coord.x % scale) + scale) % scale;

            // Don't wrap tiles vertically.
            const y = coord.y;

            if (y < 0 || y >= scale) return '';

            return `gall-peters_${String(zoom)}_${String(x)}_${String(y)}.png`;
        },
        tileSize: new Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
        minZoom: 0,
        maxZoom: 1,
        name: 'Gall-Peters',
    });

    // Describe the Gall-Peters projection used by these tiles.
    gallPetersMapType.projection = {
        fromLatLngToPoint(latLng) {
            const latRadians = (latLng.lat() * Math.PI) / 180;
            return new Point(
                GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
                GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
            );
        },
        fromPointToLatLng(point, noWrap) {
            const x = point.x / GALL_PETERS_RANGE_X;
            const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

            return new LatLng(
                (Math.asin(1 - 2 * y) * 180) / Math.PI,
                -180 + 360 * x,
                noWrap
            );
        },
    };

    return gallPetersMapType;
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-87.65, 41.85] },
            properties: { name: 'Chicago' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-149.9, 61.218] },
            properties: { name: 'Anchorage' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-99.127, 19.427] },
            properties: { name: 'Mexico City' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-0.126, 51.5] },
            properties: { name: 'London' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [28.045, -26.201] },
            properties: { name: 'Johannesburg' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [15.322, -4.325] },
            properties: { name: 'Kinshasa' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [151.207, -33.867] },
            properties: { name: 'Sydney' },
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [0, 0] },
            properties: { name: '0°N 0°E' },
        },
    ],
};

void init();index.js

উদাহরণ দেখুন

ম্যাপের প্রাথমিক ধরন

3D Maps

৪৫° ছবি (অননুমোদিত)

TypeScript

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

CSS

HTML

ম্যাপের ধরন সংক্রান্ত রেজিস্ট্রি পরিবর্তন করুন

সাজানো ম্যাপ

কাস্টম ম্যাপের ধরন

MapType ইন্টারফেস

বেস ম্যাপের ধরন

TypeScript

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

ওভারলে ম্যাপের ধরন

TypeScript

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

ইমেজ ম্যাপের ধরন

TypeScript

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

পূর্বানুমান

প্রোজেকশন প্রয়োগ করা

প্রোজেকশনে কোঅর্ডিনেট ট্রান্সফর্মেশন

প্রোজেকশনে ম্যাপ টাইল বেছে নেওয়া

TypeScript

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

`MapType` ইন্টারফেস