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

ভূমিকা

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

শুরু করুন

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

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

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

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

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

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

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

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

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

  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
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

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

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

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

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

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

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

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

মানচিত্রে একটি মার্কার যোগ করতে, 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 (উইন্ডোজের জন্য) টিপুন।

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

    1. একটি ব্রাউজারে গুগল ম্যাপ খুলুন।
    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