HTML ব্যবহার করে মার্কার সহ একটি Google মানচিত্র যোগ করুন

ভূমিকা

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

শুরু করুন

HTML ব্যবহার করে মার্কারসহ একটি গুগল ম্যাপ তৈরি করার জন্য আমরা এই ধাপগুলো আলোচনা করব:

  1. একটি এপিআই কী পান
  2. HTML, CSS, এবং JS তৈরি করুন
  3. একটি মানচিত্র যোগ করুন
  4. একটি মার্কার যোগ করুন

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

ধাপ ১: একটি এপিআই কী সংগ্রহ করুন।

এই অংশে ব্যাখ্যা করা হয়েছে কীভাবে আপনার নিজের এপিআই কী ব্যবহার করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই-তে আপনার অ্যাপকে প্রমাণীকরণ করবেন।

এপিআই কী পেতে এই ধাপগুলো অনুসরণ করুন:

  1. গুগল ক্লাউড কনসোলে যান।

  2. একটি প্রকল্প তৈরি করুন বা নির্বাচন করুন।

  3. এপিআই এবং সংশ্লিষ্ট পরিষেবাগুলো সক্রিয় করতে 'চালিয়ে যান'-এ ক্লিক করুন।

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

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

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

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

ধাপ ২: 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 key) যোগ করুন):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></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
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

ধাপ ৩: একটি মানচিত্র যোগ করুন

পৃষ্ঠায় গুগল ম্যাপ যোগ করতে, 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>
index.html

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

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

টিপস এবং সমস্যা সমাধান

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

  • গুগল ম্যাপে কোনো স্থানের অক্ষাংশ ও দ্রাঘিমাংশ স্থানাঙ্ক পেতে নিচের ধাপগুলো অনুসরণ করুন।

    1. ব্রাউজারে গুগল ম্যাপস খুলুন।
    2. মানচিত্রে ঠিক যে স্থানটির স্থানাঙ্ক প্রয়োজন, সেটিতে ডান-ক্লিক করুন।
    3. প্রদর্শিত কনটেক্সট মেনু থেকে ‘What's here’ নির্বাচন করুন। মানচিত্রটি স্ক্রিনের নীচে একটি কার্ড প্রদর্শন করবে। কার্ডটির শেষ সারিতে অক্ষাংশ এবং দ্রাঘিমাংশের স্থানাঙ্ক খুঁজুন।

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

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

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

<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
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></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>
index.html