আপনি 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 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&v=beta" defer> </script>
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> <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&libraries=maps&v=beta" defer ></script> </body> </html>
একটি 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> <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>