আপনি HTML, CSS, এবং JavaScript কোড ব্যবহার করে একটি ওয়েব পৃষ্ঠায় একটি Google মানচিত্র যোগ করতে পারেন। এই পৃষ্ঠাটি দেখায় কিভাবে একটি ওয়েব পৃষ্ঠায় দুটি উপায়ে একটি মানচিত্র যুক্ত করতে হয়: gmp-map কাস্টম HTML উপাদান ব্যবহার করে এবং একটি div উপাদান ব্যবহার করে৷
- একটি
gmp-mapউপাদান ব্যবহার করে একটি মানচিত্র যোগ করুন - একটি
divউপাদান এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি মানচিত্র যোগ করুন
ওভারভিউ
একটি মানচিত্র লোড করতে, আপনার ওয়েব পৃষ্ঠাটি অবশ্যই নিম্নলিখিত জিনিসগুলি করতে হবে:
- একটি বুটস্ট্র্যাপ লোডার ব্যবহার করে মানচিত্র জাভাস্ক্রিপ্ট API লোড করুন। এখানেই আপনার API কী পাস করা হয়েছে এবং HTML বা JavaScript সোর্স ফাইলগুলিতে যোগ করা যেতে পারে।
- HTML পৃষ্ঠায় মানচিত্র যোগ করুন এবং প্রয়োজনীয় CSS শৈলী যোগ করুন।
-
mapsলাইব্রেরি লোড করুন এবং মানচিত্রটি শুরু করুন।
একটি gmp-map উপাদান ব্যবহার করে একটি মানচিত্র যোগ করুন
gmp-map উপাদান হল একটি কাস্টম HTML উপাদান যা ওয়েব উপাদান ব্যবহার করে তৈরি করা হয়। একটি gmp-map উপাদান ব্যবহার করে একটি ওয়েব পৃষ্ঠায় একটি মানচিত্র যুক্ত করতে, নিম্নলিখিত পদক্ষেপগুলি নিন৷
HTML পৃষ্ঠায়, আপনার API কী এবং অন্য কোনো বিকল্পের সাথে কনফিগার করা বুটস্ট্র্যাপ ধারণকারী একটি
scriptউপাদান যোগ করুন। নিম্নলিখিত উদাহরণে বুটস্ট্র্যাপ,callbackপ্যারামিটারটি বাদ দেওয়া হয়েছে, কারণ এটির প্রয়োজন নেই।<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=map,marker">
HTML পৃষ্ঠায়, একটি
gmp-mapউপাদান যোগ করুন।centerজন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক এবংzoomজন্য একটি জুম মান নির্দিষ্ট করুন৷ এই উদাহরণেheightশৈলী বৈশিষ্ট্যটিও নির্দিষ্ট করা হয়েছে।<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px" ></gmp-map>
সম্পূর্ণ উদাহরণ কোড
<html>
<head>
<title>Add a Map using HTML</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<gmp-map
center="37.4220656,-122.0840897"
zoom="10"
map-id="DEMO_MAP_ID"
style="height: 400px"
></gmp-map>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta"
defer
></script>
</body>
</html> একটি div উপাদান এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি মানচিত্র যোগ করুন
div উপাদান এখনও মানচিত্র লোড করার জন্য সমর্থিত. একটি div উপাদান ব্যবহার করে একটি ওয়েব পৃষ্ঠায় একটি মানচিত্র যোগ করতে, নিম্নলিখিত পদক্ষেপগুলি নিন৷
HTML পৃষ্ঠায়, আপনার API কী এবং অন্য কোনো বিকল্পের সাথে কনফিগার করা বুটস্ট্র্যাপ লোডার ধারণকারী একটি
scriptউপাদান যোগ করুন। বিকল্পভাবে, বুটস্ট্র্যাপ লোডার কোডটি সরাসরি একটি টাইপস্ক্রিপ্ট বা জাভাস্ক্রিপ্ট ফাইলে যোগ করুন,scriptট্যাগগুলিকে বিয়োগ করুন।<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-এ, মানচিত্রের উচ্চতা 100% সেট করুন।
#map { height: 100%; }জাভাস্ক্রিপ্ট ফাইলে,
mapsলাইব্রেরি লোড করার জন্য একটি ফাংশন তৈরি করুন এবং মানচিত্রটি শুরু করুন।centerজন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক এবংzoomজন্য ব্যবহার করার জন্য জুম স্তর নির্দিষ্ট করুন৷
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
initMap();সম্পূর্ণ উদাহরণ কোড
টাইপস্ক্রিপ্ট
let map: google.maps.Map;
async function initMap(): Promise<void> {
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
map = new Map(document.getElementById("map") as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
initMap();জাভাস্ক্রিপ্ট
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
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>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>