HTML ব্যবহার করে মার্কার সহ Google Map যোগ করা

ভূমিকা

এই টিউটোরিয়াল থেকে আপনি জানতে পারবেন যে কীভাবে কাস্টম HTML এলিমেন্ট ব্যবহার করে ওয়েব পেজে মার্কার সহ Google Map যোগ করতে হয়। এই টিউটোরিয়াল ব্যবহার করে আপনি যে ম্যাপ তৈরি করবেন তা এখানে দেওয়া হল। ওটুমওয়া, আইওয়াতে একটি মার্কার পজিশন করা আছে।

শুরু করুন

HTML ব্যবহার করে মার্কার সহ Google Map তৈরি করার জন্য আমরা এইসব ধাপ কভার করব:

  1. API key পান
  2. HTML, CSS ও JS তৈরি করুন
  3. ম্যাপ যোগ করা
  4. মার্কার যোগ করা

আপনার একটি ওয়েব ব্রাউজার প্রয়োজন। কাজ করে এমন ব্রাউজারের তালিকা থেকে আপনার প্ল্যাটফর্মের উপর ভিত্তি করে Google Chrome (সাজেস্ট করা), Firefox, Safari বা Edge-এর মতো সুপরিচিত ব্রাউজার বেছে নিন।

ধাপ ১: API key পান

এই বিভাগে ব্যাখ্যা করা হয়েছে যে কীভাবে আপনার নিজস্ব API কী ব্যবহার করে Maps JavaScript API-তে আপনার অ্যাপ যাচাই করবেন।

API কী পেতে এইসব ধাপ অনুসরণ করুন:

  1. Google Cloud Console-এ যান।

  2. প্রোজেক্ট তৈরি করুন বা বেছে নিন।

  3. API ও যেকোনও সম্পর্কিত পরিষেবা চালু করতে চালিয়ে যান বিকল্পে ক্লিক করুন।

  4. ক্রেডেনশিয়াল পৃষ্ঠা থেকে API key পান (এবং API key-এর উপর বিধিনিষেধ আরোপ করুন)। মনে রাখবেন: আপনার কাছে আগে থেকে কোনও বিধিনিষেধহীন API key বা ব্রাউজার বিধিনিষেধ সহ কোনও key থাকলে, আপনি সেটি ব্যবহার করতে পারেন।

  5. কোটা চুরি প্রতিরোধ করতে এবং আপনার API কী সুরক্ষিত করতে, API কী ব্যবহার করা দেখুন।

  6. বিলিং চালু করুন। আরও তথ্যের জন্য ব্যবহার ও বিলিং দেখুন।

  7. আপনি এখন API key ব্যবহার করার জন্য প্রস্তুত।

ধাপ ২: HTML, CSS ও JS তৈরি করা

এখানে একটি সাধারণ HTML ওয়েব পেজের কোড দেওয়া হল:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

ম্যাপ লোড করতে, আপনাকে অবশ্যই Maps JavaScript API-এর জন্য বুটস্ট্র্যাপ লোডার সহ একটি script ট্যাগ যোগ করতে হবে, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে (আপনার নিজস্ব API কী যোগ করুন):

<script
    async
    src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
></script>

HTML পৃষ্ঠাটি যেহেতু ফ্রিস্ট্যান্ডিং হতে হবে, তাই সরাসরি পৃষ্ঠায় CSS কোড যোগ করুন:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

ধাপ ৩: ম্যাপ যোগ করা

পৃষ্ঠায় Google Map যোগ করতে, gmp-map HTML এলিমেন্ট কপি করে HTML পৃষ্ঠার body-এর মধ্যে পেস্ট করুন:

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

এটি ওটুমওয়া, আইওয়াকে কেন্দ্র করে একটি ম্যাপ তৈরি করে, তবে এখনও কোনও মার্কার নেই।

ধাপ ৪: মার্কার যোগ করা

ম্যাপে মার্কার যোগ করতে, gmp-advanced-marker HTML এলিমেন্ট ব্যবহার করুন। নিম্নলিখিত স্নিপেট কপি করুন এবং আগের ধাপে যোগ করা সম্পূর্ণ gmp-map-এর উপর পেস্ট করুন।

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

পূর্ববর্তী কোডটি ম্যাপে একটি মার্কার যোগ করে। উন্নত মার্কার ব্যবহার করার জন্য ম্যাপ আইডি প্রয়োজন (DEMO_MAP_ID ব্যবহার করা যেতে পারে)।

JSFiddle-এ সম্পূর্ণ উদাহরণটি ব্যবহার করে দেখুন।

পরামর্শ ও সমস্যার সমাধান

  • আপনি কাস্টম স্টাইলিং-এর মাধ্যমে ম্যাপ কাস্টমাইজ করতে পারবেন।
  • আপনার কোড পরীক্ষা ও রান করতে, সমস্যার রিপোর্ট পড়তে এবং কোডের সমস্যা সমাধান করতে, আপনার ওয়েব ব্রাউজারে ডেভেলপার টুল কনসোল ব্যবহার করুন।
  • Chrome-এ কনসোল খুলতে নিম্নলিখিত কীবোর্ড শর্টকাট ব্যবহার করুন:
    Command+Option+J (Mac-এ) অথবা Control+Shift+J (Windows-এ)।

  • Google Maps-এ কোনও লোকেশনের অক্ষাংশ ও দ্রাঘিমাংশ স্থানাঙ্ক পেতে, নিচে উল্লেখ করা ধাপগুলি অনুসরণ করুন।

    1. ব্রাউজারে Google Maps খুলুন।
    2. ম্যাপে যে সঠিক লোকেশনের কোঅর্ডিনেট প্রয়োজন, সেটির উপর মাউস রেখে ডানদিকের বোতামে ক্লিক করুন।
    3. যে প্রাসঙ্গিক মেনু দেখতে পাবেন সেখান থেকে এখানে কী আছে বিকল্প বেছে নিন। ম্যাপে স্ক্রিনের নিচে একটি কার্ড দেখা যায়। কার্ডের শেষ সারিতে অক্ষাংশ ও দ্রাঘিমাংশ কোঅর্ডিনেট খুঁজে দেখুন।

  • আপনি জিওকোডিং পরিষেবা ব্যবহার করে কোনও ঠিকানাকে অক্ষাংশ ও দ্রাঘিমাংশ কোঅর্ডিনেটে পরিবর্তন করতে পারবেন। ডেভেলপার নির্দেশিকা থেকে জিওকোডিং পরিষেবা শুরু করা সম্পর্কে বিস্তারিত তথ্য পাওয়া যায়।

সম্পূর্ণ কোডের উদাহরণ

এই টিউটোরিয়ালে ব্যবহৃত চূড়ান্ত ম্যাপ ও সম্পূর্ণ উদাহরণ কোড নিচে দেওয়া হল।

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>