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



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


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

কোন ওয়েব পেজে 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>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.