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

ভূমিকা

এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে HTML ব্যবহার করে একটি ওয়েব পেজে মার্কার সহ একটি Google মানচিত্র যুক্ত করতে হয়। এই টিউটোরিয়ালটি ব্যবহার করে আপনি যে মানচিত্রটি তৈরি করবেন তা এখানে। দুটি মার্কার অবস্থান করছে, একটি মাউন্টেন ভিউ, CA, এবং একটি সিয়াটেল, WA-তে৷

শুরু করুন

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

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

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

ধাপ 1: একটি API কী পান

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

একটি API কী পেতে এই পদক্ষেপগুলি অনুসরণ করুন:

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

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

  3. API এবং যেকোনো সম্পর্কিত পরিষেবা সক্ষম করতে অবিরত ক্লিক করুন।

  4. শংসাপত্র পৃষ্ঠায়, একটি API কী পান (এবং API কী সীমাবদ্ধতা সেট করুন)। দ্রষ্টব্য: আপনার যদি একটি বিদ্যমান অনিয়ন্ত্রিত API কী, বা ব্রাউজার সীমাবদ্ধতা সহ একটি কী থাকে, আপনি সেই কীটি ব্যবহার করতে পারেন৷

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

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

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

ধাপ 2: 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>

একটি মানচিত্র লোড করার জন্য, আপনাকে মানচিত্র জাভাস্ক্রিপ্ট API-এর জন্য বুটস্ট্র্যাপ লোডার ধারণকারী একটি script ট্যাগ যোগ করতে হবে, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে (আপনার নিজস্ব API কী যোগ করুন):

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

স্পয়লার সতর্কতা: JSFiddle-এ সমাপ্ত উদাহরণ চেষ্টা করুন ।

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

পৃষ্ঠায় একটি Google মানচিত্র যোগ করতে, gmp-map HTML উপাদানটি অনুলিপি করুন এবং HTML পৃষ্ঠার body অংশে পেস্ট করুন:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

এটি নিম্নলিখিত মানচিত্রের ফলাফল:

আপনার তৈরি করা মানচিত্রটি সান জোসে মেট্রোপলিটান এলাকায় কেন্দ্রীভূত।

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

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

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

পূর্ববর্তী কোড দুটি মার্কার যোগ করে এবং সেই মার্কারগুলিকে আরও ভালভাবে দেখানোর জন্য gmp-map এ zoom এবং center পরামিতি পরিবর্তন করে। উন্নত মার্কার ব্যবহার করার জন্য একটি মানচিত্র আইডি প্রয়োজন ( DEMO_MAP_ID ব্যবহার করা ভাল)।

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

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

  • Google মানচিত্রে একটি অবস্থানের জন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক পেতে নীচের পদক্ষেপগুলি অনুসরণ করুন৷

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

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

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

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

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html