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

ভূমিকা

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

শুরু করুন

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

  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 কী পান (এবং API কী বিধিনিষেধ সেট করুন)। মনে রাখবেন: আপনার কাছে আগে থেকে কোনও বিধিনিষেধহীন API কী থাকলে অথবা ব্রাউজার বিধিনিষেধ সহ কোনও কী থাকলে, আপনি সেই কী ব্যবহার করতে পারেন।

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

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

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

ধাপ ২: 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 Maps যোগ করতে, gmp-map HTML এলিমেন্ট কপি করে HTML পৃষ্ঠার body-এর মধ্যে পেস্ট করুন:

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

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

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

ম্যাপে মার্কার যোগ করতে, 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-এ সম্পূর্ণ উদাহরণটি ব্যবহার করে দেখুন।

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

  • আপনি কাস্টম স্টাইলিংয়ের মাধ্যমে ম্যাপ কাস্টমাইজ করতে পারবেন।
  • আপনার কোড পরীক্ষা ও রান করাতে, সমস্যার রিপোর্ট পড়তে এবং কোডের সমস্যা সমাধান করতে, আপনার ওয়েব ব্রাউজারে Developer Tools Console ব্যবহার করুন।
  • 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>