গুগল এর 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>
মানচিত্রের আকার নির্ধারণ করার জন্য আমরা 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" আইডি যুক্ত একটি নতুন মানচিত্র নির্ধারণ করে।
এখন সর্বশেষে, গুগল ম্যাপটি ওয়েব পেজে প্রদর্শিত হয়েছে।
গুগলে রাখা একটি জাভাস্ক্রিপ্ট লাইব্রেরী এই ম্যাপ এর ফাংশনগুলো পরিচালনা করে। Google Maps API এর সাথে myMap নামে একটি callbackফাংশন লিংক করে দিতে হবে।
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>