গুগল ম্যাপ ব্যবহার

মৌলিক গুগল মানচিত্র তৈরি করা

এই উদাহরণটি যুক্তরাজ্যের লন্ডনে কেন্দ্রিত গুগল মানচিত্র তৈরি করে

উদাহরণ

<!DOCTYPE html>
<html>
<body>
<h1>আমার প্রথম গুগল মানচিত্র</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center: নতুন google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

এখন আমরা উপরের উদাহরণটি পদ্ধতিগতভাবে অধ্যয়ন করবো

মানচিত্র কোন্টেনার এবং মাপ

মানচিত্রকে স্থান দেওয়ার জন্য একটি HTML ইলেকট্রনিক প্রতিভা চাই

<div id="googleMap" style="width:100%;height:400px"></div>

একইসঙ্গে মানচিত্রের মাপ নিয়ে নেওয়া

একটি ফাংশন তৈরি করে মানচিত্রের বৈশিষ্ট্য নিয়ে নেওয়া

function myMap() {
var mapProp = {
    center: নতুন google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp ভাবনা ম্যাপের প্রতিভা নির্ধারণ করে。

center প্রতিভার মাধ্যমে ম্যাপের কেন্দ্রস্থল নির্ধারণ করে (উত্তর-দূরত্ব ও দূরত্ব কোণ্ডারোগ্রাম)。

zoom প্রতিভার মাধ্যমে ম্যাপের জোয়াইল স্কেল নির্ধারণ করে (ম্যাপকে জোয়াইল করুন)。

দেখুন এই লাইনটি:

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

এটি পাঠানো পারামিটারকে ব্যবহার করে (mapProp) id="googleMap" এর <div> ইলেমেন্টের মধ্যে একটি নতুন ম্যাপ তৈরি করুন。

বহুবহু ম্যাপ

নিচের উদাহরণটি চারটি ভিন্ন ম্যাপ ধরনের ম্যাপকে নির্দিষ্ট করেছে:

উদাহরণ

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

মুক্ত গুগল API Key

Google ওয়েবসাইটকে কোনও গুগল API-কে মুক্তভাবে কল করার অনুমতি দেয়, দিনের প্রতিদিন হাজার হাজারবার কল করা হয়。

নিচের লিঙ্কটি এসে এপিআই কী কিভাবে পাবেন জানুন:

https://developers.google.com/maps/documentation/javascript/get-api-key

গুগল ম্যাপটি এপিআই লোড করার সময় key পারামিটারে এই API কী খুঁজুন:

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