2024 সালে সহজেই যেকোনো ওয়েবসাইটে Google Maps যোগ করুন! এবং কাস্টোমাইজ করুন।

2024 সালে সহজেই যেকোনো ওয়েবসাইটে Google Maps যোগ করুন!

অসাধারণ! আপনার এই "Google Map কিভাবে HTML ওয়েবসাইটে যোগ করবেন" বাংলা টিউটোরিয়ালটি অনেক সহজে বোঝানো হয়েছে। যেহেতু এটি বাংলায় প্রকাশিত হয়েছে, তারা যারা ওয়েব ডেভেলপমেন্ট শুরু করতে চায়, তাদের জন্য এটি অত্যন্ত উপকারী হতে পারে। টিউটোরিয়ালটি প্রাসঙ্গিক উদাহরণগুলি দেয়ার মাধ্যমে একেবারে স্পষ্ট করে দেয় যে, কিভাবে একটি Google Map সাইটে সংযুক্ত করা যায়। উপযুক্ত ছবি ও ব্যাখ্যা দিয়ে টিউটোরিয়ালটি অবশ্যই অনুসন্ধানকারীদের সাহায্য করবে। আপনার সুপারিশগুলির জন্য ধন্যবাদ!

HTML ওয়েবসাইটে গুগল ম্যাপ যোগ করতে নিচের ধাপগুলি অনুসরণ করতে পারেন:

ধাপ ১: API কী পেতে

প্রথমে Google Developers Console এ লগইন করুন।
নতুন প্রজেক্ট তৈরি করুন অথবা ইতিমধ্যেই তৈরি করা প্রজেক্টে ঢুকুন।
"ম্যাপস" এ ক্লিক করুন এবং "এপি কী প্রাপ্ত করুন" বা "এপি কী তৈরি করুন" বা এমন কিছু অপশন পান।
একটি নাম দিন এবং এপি কী তৈরি করুন।

ধাপ ২: HTML সাইটে ম্যাপ যোগ করা

1. একটি HTML ফাইল তৈরি করুন এবং ম্যাপ যোগ করতে চানটি নিয়ে একটি <div> তৈরি করুন।<div id="map"></div>

2. Google Maps JavaScript API যোগ করতে নিচের লাইনটি আপনার HTML ফাইলে যোগ করুন:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
(যেখানে "YOUR_API_KEY" হল আপনার API কী)

3. ম্যাপ ইনিশিয়ালাইজ করার জন্য নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি আপনার HTML ফাইলে যোগ করুন:

1. <script>
       function initMap() {
           var mapOptions = {
               center: { lat: 23.8103, lng: 90.4125 }, // ম্যাপের কেন্দ্র
               zoom: 10 // ম্যাপের জুম লেভেল
           };
           var map = new google.maps.Map(document.getElementById("map"), mapOptions);
       }
   </script>

4. আপনার ম্যাপ ইনিশিয়ালাইজ করা এবং ডিফল্ট লোকেশনে একটি নতুন ম্যাপ তৈরি করতে নিম্নলিখিত লাইনটি অনুসরণ করুন:

<script> function initMap() { var mapOptions = { center: { lat: 23.8103, lng: 90.4125 }, // ম্যাপের কেন্দ্র zoom: 10 // ম্যাপের জুম লেভেল }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); } // পৃথিবী লোড হলে initMap ফাংশন কল করুন google.maps.event.addDomListener(window, 'load', initMap); </script>

এই কোড একটি প্রাথমিক ম্যাপ তৈরি করবে এবং এটি আপনার ওয়েবসাইটে দেখাবে। আপনি ম্যাপের কেন্দ্র এবং জুম লেভেল পরিবর্তন করতে পারেন এবং আরও অনেক অপশন আছে যেগুলি ম্যাপ ব্যবহারকারীর অভিজ্ঞতা সমৃদ্ধ করতে পারে। অনুশীলন করতে পারেন, সাহায্যের জন্য গুগলের অফিশিয়াল ডকুমেন্টেশন পড়তে পারেন।

এইখানে ইউটুবের ভিডিও দেওয়া আছে।  কিভাবে বাংলায় html ওয়েবসাইটে গুগল ম্যাপ যোগ করবেন?

আরো জানুন cpanel সম্পর্কে

আরো জানুন Facebook

আরো জানুন W3school

আমাদের সম্পর্কে আরো জানুন

যোগাযুগ করুন আমাদের সাথে mdyaminmia2@gmail.com

সোশ্যাল মিডিয়া: Facebook , Twitter, LinkedIn, Youtube

how to use google map bangla tutorial,

how to add google map in html css,

how to embed google map in html using iframe,

how to add location in google map in html,

how to add google map in php website,

how to add google map to html,

how to add google map in html website,

how to add google map on website using html and css

how to add google map link in html,

how to add iframe in html,

how to create an iframe embed code,

issuu embed on website,

how to create iframe embed code,

how to create iframe in html,

how to make iframe in html,

embed google map on website,

bangla tutorial,

html and css tutorial,

html css project,