X

X

X

HTML এ গুগল ম্যাপ উপস্থাপণ


গুগল ম্যাপ ব্যবহার করে ওয়েবপেজ পৃথিবীর যেকোনো এলাকার মানচিত্র উপস্থাপণ করা যায়:


একটি সাধারণ ওয়েব পেজের উদাহরণ

নিচে একটি সাধারণ ওয়েবপেজে গুগল ম্যাপ উপস্থাপণ করার নিয়ম বর্ণনা করা হলো:

Code Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

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

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ম্যাপ সাইজ সেট করার নিয়ম

Code Example

<h1>My First Google Map</h1>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ফাংশনের মাধ্যমে ম্যাপের বিভিন্ন প্রোপার্ট সেট করার নিয়ম

নিচে London, England এর মানচিত্র উপস্থাপণ করা হলো:

Code Example

<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 variable দিয়ে ম্যাপের প্রোপার্টি সেট করা হয়।

center property দিয়ে latitude এবং longitude coordinate ব্যবহার করে বর্ণনা করা হয় ম্যাপটি সেন্টার হবে কি না।

zoom property দিয়ে জুম লেভেল সেট করা হয়।

mapTypeId property দিয়ে ম্যাপ এর ধরণ সেট করা হয়। সাপোর্টেড ম্যাপগুলো হলো : ROADMAP, SATELLITE, HYBRID, এবং TERRAIN ।

 var map=new google.maps.Map(document.getElementById(“map”), mapOptions);  কোড দিয়ে একটি নতুন ম্যাপ ওয়েব পেজের জন্য তৈরি করা হয়।


Google Maps API যুক্তকরণ

অবশেষে ম্যাপটি ওয়েবপেজে যুক্ত করুন।

ম্যাপের ফাংশনালিটি জাভাস্ক্রিপ্ট ব্যবহার করে যুক্ত করা হয়।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বিস্তারিত জানার জন্য Google Maps Tutorial লিংকটি অনুসরণ করুন।