আপনি HTML, CSS, এবং JavaScript কোড ব্যবহার করে একটি ওয়েব পেজে গুগল ম্যাপ যোগ করতে পারেন। এই পেজটিতে দেখানো হয়েছে কীভাবে একটি ওয়েব পেজে ম্যাপ যোগ করতে হয় এবং তারপর প্রোগ্রাম্যাটিকভাবে ম্যাপ ইনস্ট্যান্সটি অ্যাক্সেস করতে হয়।
-
gmp-mapএলিমেন্ট ব্যবহার করে একটি ম্যাপ যোগ করুন -
divএলিমেন্ট এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি মানচিত্র যোগ করুন - ম্যাপ ইনস্ট্যান্সে প্রোপার্টি সেট এবং গেট করুন
সংক্ষিপ্ত বিবরণ
মানচিত্র লোড করার জন্য, আপনার ওয়েব পেজকে নিম্নলিখিত কাজগুলো করতে হবে:
- একটি বুটস্ট্র্যাপ লোডার ব্যবহার করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করুন । এখানেই আপনার এপিআই কী পাস করা হয়। এটি এইচটিএমএল অথবা জাভাস্ক্রিপ্ট সোর্স ফাইল, যেকোনোটিতেই যোগ করা যেতে পারে।
- HTML পেজে ম্যাপটি যোগ করুন এবং প্রয়োজনীয় CSS স্টাইলগুলো যুক্ত করুন।
-
mapsলাইব্রেরিটি লোড করুন এবং ম্যাপটি প্রারম্ভিক করুন।
gmp-map এলিমেন্ট ব্যবহার করে একটি ম্যাপ যোগ করুন
একটি ওয়েব পেজে গুগল ম্যাপ যোগ করার জন্য gmp-map এলিমেন্টটি সবচেয়ে পছন্দের উপায়। এটি ওয়েব কম্পোনেন্ট ব্যবহার করে তৈরি একটি কাস্টম এইচটিএমএল (HTML) এলিমেন্ট। gmp-map এলিমেন্ট ব্যবহার করে একটি ওয়েব পেজে ম্যাপ যোগ করতে, নিম্নলিখিত ধাপগুলো অনুসরণ করুন।
একটি HTML পৃষ্ঠায় বুটস্ট্র্যাপ সম্বলিত একটি
scriptএলিমেন্ট যোগ করুন, অথবাscriptএলিমেন্ট ছাড়াই এটিকে একটি জাভাস্ক্রিপ্ট বা টাইপস্ক্রিপ্ট সোর্স ফাইলে যোগ করুন। আপনার API কী এবং অন্য যেকোনো অপশন দিয়ে বুটস্ট্র্যাপটি কনফিগার করুন। আপনি ডাইনামিক লাইব্রেরি ইম্পোর্ট অথবা সরাসরি স্ক্রিপ্ট লোডিং-এর মধ্যে যেকোনো একটি বেছে নিতে পারেন। এই উদাহরণটি একটি HTML পৃষ্ঠায় ডাইনামিক স্ক্রিপ্ট লোডিং বুটস্ট্র্যাপ যোগ করা দেখাচ্ছে:<script> (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: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
HTML পেজে একটি
gmp-mapএলিমেন্ট যোগ করুন।centerজন্য অক্ষাংশ ও দ্রাঘিমাংশের স্থানাঙ্ক (আবশ্যক),zoomজন্য একটি জুম ভ্যালু (আবশ্যক), এবং প্রয়োজন হলে একটিmap-idউল্লেখ করুন (অ্যাডভান্সড মার্কারের মতো কিছু ফিচারের জন্য এটি আবশ্যক)।
<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID"> </gmp-map>
সম্পূর্ণ উদাহরণ কোড
টাইপস্ক্রিপ্ট
async function initMap(): Promise<void> { // Import the needed libraries. await google.maps.importLibrary('maps'); // Access the map. const mapElement = document.querySelector('gmp-map')!; // Access the underlying map object. const innerMap = mapElement.innerMap; console.log({ mapElement, innerMap }); } void initMap();
জাভাস্ক্রিপ্ট
async function initMap() { // Import the needed libraries. await google.maps.importLibrary('maps'); // Access the map. const mapElement = document.querySelector('gmp-map'); // Access the underlying map object. const innerMap = mapElement.innerMap; console.log({ mapElement, innerMap }); } void initMap();
সিএসএস
/* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
এইচটিএমএল
<html>
<head>
<title>Simple Map</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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
</script>
</head>
<body>
<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>
</body>
</html>নমুনা চেষ্টা করুন
div এলিমেন্ট এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি মানচিত্র যোগ করুন
ওয়েব পেজে div এলিমেন্ট ব্যবহার করে ম্যাপ যোগ করতে নিচের ধাপগুলো অনুসরণ করুন।
একটি HTML পৃষ্ঠায় বুটস্ট্র্যাপ সম্বলিত একটি
scriptএলিমেন্ট যোগ করুন, অথবাscriptএলিমেন্ট ছাড়াই এটিকে একটি জাভাস্ক্রিপ্ট বা টাইপস্ক্রিপ্ট সোর্স ফাইলে যোগ করুন। আপনার API কী এবং অন্য যেকোনো অপশন দিয়ে বুটস্ট্র্যাপটি কনফিগার করুন। আপনি ডাইনামিক লাইব্রেরি ইম্পোর্ট অথবা সরাসরি স্ক্রিপ্ট লোডিং-এর মধ্যে যেকোনো একটি বেছে নিতে পারেন। এই উদাহরণটি একটি HTML পৃষ্ঠায় ডাইনামিক বুটস্ট্র্যাপ যোগ করার পদ্ধতি দেখাচ্ছে:<script> (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: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
HTML পেজে ম্যাপটি রাখার জন্য একটি
divএলিমেন্ট যোগ করুন।<div id="map"></div>
CSS-এ ম্যাপের উচ্চতা ১০০% সেট করুন। ম্যাপটি দৃশ্যমান হওয়ার জন্য CSS
heightঅ্যাট্রিবিউটটি আবশ্যক।#map { height: 100%; }
JS বা TS ফাইলে,
mapsলাইব্রেরি লোড করতে এবং ম্যাপটি ইনিশিয়ালাইজ করতে একটি ফাংশন তৈরি করুন।centerজন্য অক্ষাংশ ও দ্রাঘিমাংশের স্থানাঙ্ক এবংzoomজন্য ব্যবহৃত জুম লেভেল নির্দিষ্ট করুন। প্রয়োজন হলে,mapIdপ্রপার্টি ব্যবহার করে একটি ম্যাপ আইডি যোগ করুন। যেহেতু ম্যাপটি ডিফল্টভাবে রাস্টার হবে, তাই "VECTOR" ম্যাপ অপশনটি উল্লেখ করে একটি ভেক্টর ম্যাপের জন্য অনুরোধ করুন; সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতার জন্য ভেক্টর ম্যাপ টাইপটি সুপারিশ করা হয়, কারণ এটি উন্নত ভিজ্যুয়াল ফিডেলিটি প্রদানের পাশাপাশি ম্যাপের টিল্ট এবং হেডিং নিয়ন্ত্রণ করার ক্ষমতা দেয়।টাইপস্ক্রিপ্ট
let map: google.maps.Map; async function initMap(): Promise<void> { // Import the needed libraries const { Map } = await google.maps.importLibrary('maps'); // Create a new map from the div with id="map". map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, renderingType: 'VECTOR', }); console.log(map); } void initMap();
জাভাস্ক্রিপ্ট
let map; async function initMap() { // Import the needed libraries const { Map } = await google.maps.importLibrary('maps'); // Create a new map from the div with id="map". map = new Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, renderingType: 'VECTOR', }); console.log(map); } void initMap();
সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন
টাইপস্ক্রিপ্ট
let map: google.maps.Map; async function initMap(): Promise<void> { // Import the needed libraries const { Map } = await google.maps.importLibrary('maps'); // Create a new map from the div with id="map". map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, renderingType: 'VECTOR', }); console.log(map); } void initMap();
জাভাস্ক্রিপ্ট
let map; async function initMap() { // Import the needed libraries const { Map } = await google.maps.importLibrary('maps'); // Create a new map from the div with id="map". map = new Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, renderingType: 'VECTOR', }); console.log(map); } void initMap();
সিএসএস
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
এইচটিএমএল
<html>
<head>
<title>Simple Map</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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>নমুনা চেষ্টা করুন
ম্যাপ ইনস্ট্যান্সে প্রোপার্টি সেট এবং গেট করুন
ম্যাপ ইনস্ট্যান্সটির সাথে ইন্টারঅ্যাক্ট করতে, ধারণকারী এলিমেন্টটি সিলেক্ট করুন। আপনি gmp-map এলিমেন্ট নাকি div এলিমেন্ট ব্যবহার করেছেন, তার উপর নির্ভর করে এই কাজটি করার কোড ভিন্ন হবে।
একটি gmp-map এলিমেন্ট থেকে একটি ম্যাপ ইনস্ট্যান্স পান
gmp-map এলিমেন্ট ব্যবহার করার সময় ম্যাপ ইনস্ট্যান্সটি পেতে, এখানে দেখানো অনুযায়ী document.querySelector ব্যবহার করে একটি mapElement ইনস্ট্যান্স পুনরুদ্ধার করুন।
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
তারপর mapElement ইনস্ট্যান্সটিতে প্রোপার্টিগুলো সেট করুন:
mapElement.zoom = 8;
MapElement ক্লাস অভ্যন্তরীণভাবে Map ক্লাস ব্যবহার করে; এখানে দেখানো অনুযায়ী MapElement.innerMap প্রপার্টি ব্যবহার করে Map ক্লাসটি অ্যাক্সেস করুন:
mapElement.innerMap.setOptions({
mapTypeControl: false,
});
একটি div এলিমেন্ট থেকে একটি ম্যাপ ইনস্ট্যান্স নিন
div এলিমেন্ট ব্যবহার করার সময়, ইনিশিয়ালাইজেশনের সময়ে ম্যাপ ইনস্ট্যান্সটি নিন এবং অপশনগুলো সেট করুন:
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
mapTypeControl: false,
});
প্রারম্ভিকীকরণের পরে, এখানে দেখানো অনুযায়ী map ইনস্ট্যান্সে অপশনগুলো সেট করুন:
map.setOptions({
zoom: 8,
});