এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

আপনার ওয়েবসাইটে একটি মার্কার সহ একটি Google মানচিত্র যোগ করুন

ভূমিকা

এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে একটি ওয়েব পৃষ্ঠায় একটি মার্কার সহ একটি সাধারণ Google মানচিত্র যুক্ত করতে হয়। এটি এইচটিএমএল এবং সিএসএসের শিক্ষানবিস বা মধ্যবর্তী জ্ঞান এবং জাভাস্ক্রিপ্টের সামান্য জ্ঞান সহ লোকেদের জন্য উপযুক্ত। মানচিত্র তৈরির জন্য একটি উন্নত গাইডের জন্য, বিকাশকারীর নির্দেশিকা পড়ুন।

এই টিউটোরিয়ালটি ব্যবহার করে আপনি যে মানচিত্রটি তৈরি করবেন তা নীচে দেওয়া হল। চিহ্নিতকারীটি উলুরু -কাটা তজুতা জাতীয় উদ্যানের উলুরুতে (আয়ার্স রক নামেও পরিচিত) অবস্থিত।

নীচের বিভাগটি এই টিউটোরিয়ালে মানচিত্র তৈরি করার জন্য আপনার প্রয়োজনীয় পুরো কোডটি প্রদর্শন করে।

টাইপস্ক্রিপ্ট

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

জাভাস্ক্রিপ্ট

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

সিএসএস

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

এইচটিএমএল

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

নমুনা চেষ্টা করুন

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google ক্লাউড শেল

শুরু হচ্ছে

আপনার ওয়েব পৃষ্ঠায় একটি মার্কার সহ একটি Google মানচিত্র তৈরি করার তিনটি ধাপ রয়েছে:

একটি HTML পৃষ্ঠা তৈরি করুন
একটি মার্কার সহ একটি মানচিত্র যোগ করুন
একটি API কী পান

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

ধাপ 1: একটি HTML পৃষ্ঠা তৈরি করুন

এখানে একটি মৌলিক HTML ওয়েব পৃষ্ঠার কোড আছে:

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

মনে রাখবেন যে এটি একটি শিরোনাম স্তর তিন ( h3 ) এবং একটি একক div উপাদান সহ একটি খুব মৌলিক পৃষ্ঠা। আপনি ওয়েব পৃষ্ঠায় আপনার পছন্দের যেকোনো বিষয়বস্তু যোগ করতে পারেন।

কোড বোঝা

নীচের কোডটি একটি মাথা এবং একটি শরীরের সমন্বয়ে একটি HTML পৃষ্ঠা তৈরি করে।

<html>
 <head>
 </head>
 <body>
 </body>
</html>

আপনি নীচের কোডটি ব্যবহার করে মানচিত্রের উপরে একটি শিরোনাম স্তর যোগ করতে পারেন।

<h3>My Google Maps Demo</h3>

নীচের কোডটি আপনার Google মানচিত্রের জন্য পৃষ্ঠার একটি এলাকা সংজ্ঞায়িত করে।

<!--The div element for the map -->
<div id="map"></div>

টিউটোরিয়ালের এই পর্যায়ে, div শুধুমাত্র একটি ধূসর ব্লক হিসাবে প্রদর্শিত হবে, কারণ আপনি এখনও একটি মানচিত্র যোগ করেননি। নীচের কোডটি CSS বর্ণনা করে যা div এর আকার এবং রঙ সেট করে।

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}

উপরের কোডে, style উপাদানটি আপনার মানচিত্রের জন্য div আকার নির্ধারণ করে। মানচিত্রটি দৃশ্যমান হওয়ার জন্য div প্রস্থ এবং উচ্চতা 0px-এর বেশি সেট করুন। এই ক্ষেত্রে, আপনার ওয়েব পৃষ্ঠার প্রস্থ জুড়ে প্রদর্শন করার জন্য div টি 400 পিক্সেলের উচ্চতা এবং 100% প্রস্থে সেট করা হয়েছে।

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

এই বিভাগটি আপনাকে দেখায় কিভাবে আপনার ওয়েব পৃষ্ঠায় Maps JavaScript API লোড করতে হয় এবং কীভাবে আপনার নিজস্ব JavaScript লিখতে হয় যা API ব্যবহার করে একটি মার্কার সহ একটি মানচিত্র যোগ করে।

টাইপস্ক্রিপ্ট

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

জাভাস্ক্রিপ্ট

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

সিএসএস

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

এইচটিএমএল

<html>
  <head>
    <title>Add Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

নমুনা চেষ্টা করুন

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google ক্লাউড শেল

কোড বোঝা

নীচের কোডে, script নির্দিষ্ট URL থেকে API লোড করে।

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

উপরের কোডে, callback প্যারামিটার API লোড হওয়ার পরে initMap ফাংশনটি চালায়। async অ্যাট্রিবিউট ব্রাউজারকে API লোড হওয়ার সময় আপনার পৃষ্ঠার অবশিষ্টাংশ পার্স করা চালিয়ে যেতে দেয়। একবার এটি লোড হয়ে গেলে, ব্রাউজারটি বিরতি দেবে এবং অবিলম্বে স্ক্রিপ্টটি কার্যকর করবে। key প্যারামিটারে আপনার API কী রয়েছে।

ধাপ 3 দেখুন: পরে আপনার নিজস্ব API কী পাওয়ার নির্দেশাবলীর জন্য একটি API কী পান ।

নীচের initMap ফাংশন রয়েছে যা ওয়েব পৃষ্ঠা লোড হওয়ার সময় মানচিত্রটি শুরু করে এবং যোগ করে। আপনার নিজস্ব জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করতে একটি script ট্যাগ ব্যবহার করুন যাতে initMap ফাংশন রয়েছে।

  function initMap() {}

ওয়েব পেজে ম্যাপ div খুঁজে পেতে document.getElementById() ফাংশন যোগ করুন।

নীচের কোডটি একটি নতুন Google মানচিত্র অবজেক্ট তৈরি করে এবং কেন্দ্র এবং জুম স্তর সহ মানচিত্রে বৈশিষ্ট্য যোগ করে। অন্যান্য সম্পত্তি বিকল্পের জন্য ডকুমেন্টেশন দেখুন।

টাইপস্ক্রিপ্ট

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);index.ts

জাভাস্ক্রিপ্ট

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});index.js

উপরের কোডে, new google.maps.Map() একটি নতুন Google মানচিত্র অবজেক্ট তৈরি করে। center সম্পত্তি API কে বলে যে মানচিত্রটি কোথায় কেন্দ্র করতে হবে।

অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক পেতে, বা ভৌগলিক স্থানাঙ্কে একটি ঠিকানা রূপান্তর সম্পর্কে আরও জানুন।

zoom বৈশিষ্ট্য মানচিত্রের জন্য জুম স্তর নির্দিষ্ট করে। জুম: 0 হল সর্বনিম্ন জুম, এবং সমগ্র পৃথিবী প্রদর্শন করে। উচ্চতর রেজোলিউশনে পৃথিবীতে জুম করার জন্য জুম মান উচ্চতর সেট করুন।

নীচের কোডটি মানচিত্রে একটি মার্কার রাখে। position বৈশিষ্ট্য মার্কার অবস্থান সেট করে.

টাইপস্ক্রিপ্ট

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.ts

জাভাস্ক্রিপ্ট

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.js

মার্কার সম্পর্কে আরও জানুন:

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

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

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

গুগল ক্লাউড কনসোলে যান।
একটি প্রকল্প তৈরি করুন বা নির্বাচন করুন।
API এবং যেকোনো সম্পর্কিত পরিষেবা সক্ষম করতে অবিরত ক্লিক করুন।
শংসাপত্র পৃষ্ঠায়, একটি API কী পান (এবং API কী সীমাবদ্ধতা সেট করুন)। দ্রষ্টব্য: আপনার যদি একটি বিদ্যমান অনিয়ন্ত্রিত API কী, বা ব্রাউজার সীমাবদ্ধতা সহ একটি কী থাকে, আপনি সেই কীটি ব্যবহার করতে পারেন৷
কোটা চুরি রোধ করতে এবং আপনার API কী সুরক্ষিত করতে, API কী ব্যবহার করা দেখুন।
বিলিং সক্ষম করুন। আরও তথ্যের জন্য ব্যবহার এবং বিলিং দেখুন।
এই পৃষ্ঠা থেকে এই টিউটোরিয়ালের সম্পূর্ণ কোডটি আপনার পাঠ্য সম্পাদকে অনুলিপি করুন।
ইউআরএলে key প্যারামিটারের মানটি আপনার নিজস্ব API কী দিয়ে প্রতিস্থাপন করুন (এটি সেই API কী যা আপনি সবেমাত্র পেয়েছেন)।
```
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
```
এই ফাইলটিকে একটি নাম দিয়ে সংরক্ষণ করুন যা .html দিয়ে শেষ হয়, যেমন index.html ।
আপনার ডেস্কটপ থেকে আপনার ব্রাউজারে টেনে এনে একটি ওয়েব ব্রাউজারে HTML ফাইল লোড করুন। বিকল্পভাবে, ফাইলটিতে ডাবল-ক্লিক করা বেশিরভাগ অপারেটিং সিস্টেমে কাজ করে।

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

আপনি মানচিত্র কাস্টমাইজ করতে শৈলী এবং বৈশিষ্ট্য মত বিকল্প পরিবর্তন করতে পারেন. মানচিত্র কাস্টমাইজ করার বিষয়ে আরও তথ্যের জন্য, স্টাইলিং এবং মানচিত্রে অঙ্কনের নির্দেশিকা পড়ুন।
আপনার ওয়েব ব্রাউজারে ডেভেলপার টুলস কনসোল ব্যবহার করুন আপনার কোড পরীক্ষা করতে এবং চালাতে, ত্রুটি রিপোর্ট পড়তে এবং আপনার কোডের সমস্যা সমাধান করতে।
Chrome-এ কনসোল খুলতে নিম্নলিখিত কীবোর্ড শর্টকাটগুলি ব্যবহার করুন:
Command+Option+J (ম্যাকে), অথবা Control+Shift+J (উইন্ডোজে)।
Google মানচিত্রে একটি অবস্থানের জন্য অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক পেতে নীচের পদক্ষেপগুলি অনুসরণ করুন৷
1. একটি ব্রাউজারে Google Maps খুলুন।
2. মানচিত্রের সঠিক অবস্থানটিতে ডান-ক্লিক করুন যার জন্য আপনার স্থানাঙ্ক প্রয়োজন।
3. প্রদর্শিত প্রসঙ্গ মেনু থেকে এখানে কী আছে নির্বাচন করুন। মানচিত্রটি স্ক্রিনের নীচে একটি কার্ড প্রদর্শন করে। কার্ডের শেষ সারিতে অক্ষাংশ এবং দ্রাঘিমাংশের স্থানাঙ্কগুলি খুঁজুন।
আপনি জিওকোডিং পরিষেবা ব্যবহার করে একটি ঠিকানাকে অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্কে রূপান্তর করতে পারেন। বিকাশকারী গাইড জিওকোডিং পরিষেবা দিয়ে শুরু করার বিষয়ে বিস্তারিত তথ্য প্রদান করে।