এইচটিএমএল গুগল ম্যাপ - HTML Google Map


গুগল এর Google Map API ব্যবহার করে ওয়েব পেজে কোন স্থানের মানচিত্র প্রদর্শন করা যায়।


বেসিক ওয়েব পেজ

কোন ওয়েব পেজে Google মানচিত্র যোগ করার পদ্ধতি প্রদর্শন করতে, আমরা একটি বেসিক এইচটিএমএল ওয়েব পেজ ব্যবহার করছি।

উদাহরণ

<!DOCTYPE html> 
<html>
<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
<html>


কোড এডিটর



Map এর আকার নির্ধারণ

মানচিত্রের আকার নির্ধারণ করার জন্য আমরা div এলিমেন্টের সাথে style প্রপার্টি ব্যবহার করেছি এবং তাতে width এবং height আত্ত্রিবুতে ব্যবহার করেছি। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

<div id="map" style="width:400px;height:400px"></div>


কোড এডিটর



ফাংশন তৈরি করা

নিচে একটি ফাংশন তৈরি করে দেখানো হয়েছে, এখানে মানচিত্রে লন্ডন, ইংল্যান্ড এর অবস্থান দেখানো হয়েছে।

উদাহরণ

<div id="map" style="width:400px;height:400px;"></div> 

<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>


কোড এডিটর


ব্যাখ্যা

mapOptions ভেরিয়েবলটি মানচিত্রের প্রপার্টিগুলো নির্ধারণ করে।

center প্রপার্টি অক্ষাংশ বা latitude এবং দ্রাঘিমাংশ বা longitude সমন্বয় করে নির্ধারণ করে মানচিত্রের কেন্দ্রের স্থানটি।

zoom প্রোপার্টি মানচিত্র বিবর্ধন বা zoom করতে ব্যবহার হয়।

mapTypeId প্রপার্টি কোন ধরনের মানচিত্র প্রদর্শিত হবে তা নির্ধারণ করে। সমর্থিত ধরনগুলো হল ROADMAP, Satellite, Hybrid এবং TERRAIN.

"var map=new google.maps.Map(document.getElementById("map"), mapOptions);" এই লাইনটি <div> এলিমেন্টের ভেতরে "map" আইডি যুক্ত একটি নতুন মানচিত্র নির্ধারণ করে।


API লিংক করা

এখন সর্বশেষে, গুগল ম্যাপটি ওয়েব পেজে প্রদর্শিত হয়েছে।

গুগলে রাখা একটি জাভাস্ক্রিপ্ট লাইব্রেরী এই ম্যাপ এর ফাংশনগুলো পরিচালনা করে। Google Maps API এর সাথে myMap নামে একটি callback ফাংশন লিংক করে দিতে হবে।

উদাহরণ


<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>


কোড এডিটর