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

ভূমিকা

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

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

শুরু হচ্ছে

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

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

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

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

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

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

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

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

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

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

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

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

  7. একবার আপনি একটি API কী পেয়ে গেলে, "YOUR_API_KEY" এ ক্লিক করে এটিকে নিম্নলিখিত স্নিপেটে যোগ করুন। আপনার নিজের ওয়েব পৃষ্ঠায় ব্যবহার করতে বুটলোডার স্ক্রিপ্ট ট্যাগটি অনুলিপি করুন এবং আটকান৷ 

    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

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

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>

index.html

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

কোড বুঝুন

উদাহরণের এই পর্যায়ে, আমাদের আছে:

  • !DOCTYPE html ঘোষণা ব্যবহার করে অ্যাপ্লিকেশনটিকে HTML5 হিসাবে ঘোষণা করেছে৷
  • মানচিত্র ধরে রাখতে "মানচিত্র" নামে একটি ডিভ উপাদান তৈরি করা হয়েছে।
  • বুটস্ট্র্যাপ লোডার ব্যবহার করে মানচিত্র জাভাস্ক্রিপ্ট API লোড করা হয়েছে।

আপনার অ্যাপ্লিকেশনটিকে HTML5 হিসাবে ঘোষণা করুন

আমরা সুপারিশ করি যে আপনি আপনার ওয়েব অ্যাপ্লিকেশনের মধ্যে একটি সত্য DOCTYPE ঘোষণা করুন৷ এখানে উদাহরণগুলির মধ্যে, আমরা নীচে দেখানো হিসাবে সাধারণ HTML5 DOCTYPE ব্যবহার করে আমাদের অ্যাপ্লিকেশনগুলিকে HTML5 হিসাবে ঘোষণা করেছি:

<!DOCTYPE html>

বেশিরভাগ বর্তমান ব্রাউজারগুলি এই DOCTYPE সাথে "স্ট্যান্ডার্ড মোডে" ঘোষণা করা সামগ্রী রেন্ডার করবে যার অর্থ হল আপনার অ্যাপ্লিকেশন আরও ক্রস-ব্রাউজার অনুগত হওয়া উচিত। DOCTYPE এছাড়াও সুন্দরভাবে অবনমিত করার জন্য ডিজাইন করা হয়েছে; যে ব্রাউজারগুলি এটি বুঝতে পারে না তারা এটিকে উপেক্ষা করবে এবং তাদের বিষয়বস্তু প্রদর্শনের জন্য "quirks মোড" ব্যবহার করবে।

উল্লেখ্য যে কিছু CSS যেগুলো quirks মোডে কাজ করে সেগুলো স্ট্যান্ডার্ড মোডে বৈধ নয়। সুনির্দিষ্টভাবে, সমস্ত শতাংশ-ভিত্তিক মাপ অবশ্যই প্যারেন্ট ব্লক উপাদান থেকে উত্তরাধিকারসূত্রে প্রাপ্ত হতে হবে, এবং যদি এই পূর্বপুরুষদের মধ্যে কেউ একটি মাপ নির্দিষ্ট করতে ব্যর্থ হয়, সেগুলিকে 0 x 0 পিক্সেলের আকার বলে ধরে নেওয়া হয়। সেই কারণে, আমরা নিম্নলিখিত style ঘোষণা অন্তর্ভুক্ত করি: 

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

একটি div উপাদান তৈরি করুন

একটি ওয়েব পৃষ্ঠায় মানচিত্র প্রদর্শনের জন্য, আমাদের অবশ্যই এটির জন্য একটি স্থান সংরক্ষণ করতে হবে। সাধারণত, আমরা একটি নামযুক্ত div উপাদান তৈরি করে এবং ব্রাউজারের ডকুমেন্ট অবজেক্ট মডেল (DOM) এ এই উপাদানটির একটি রেফারেন্স পাওয়ার মাধ্যমে এটি করি।

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

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

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

/* 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% প্রস্থে সেট করা হয়েছে। উল্লেখ্য যে ডিভগুলি সাধারণত তাদের ধারণকৃত উপাদান থেকে তাদের প্রস্থ নেয় এবং খালি ডিভগুলির সাধারণত 0 উচ্চতা থাকে। এই কারণে, আপনাকে অবশ্যই div এ স্পষ্টভাবে একটি উচ্চতা সেট করতে হবে।

Maps JavaScript API লোড করুন

বুটস্ট্র্যাপ লোডার মানচিত্র জাভাস্ক্রিপ্ট API লোড করার জন্য প্রস্তুত করে ( importLibrary() বলা না হওয়া পর্যন্ত কোনো লাইব্রেরি লোড হয় না)।

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

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

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

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

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

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

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

উপরের কোডে, যখন initMap() ফাংশন কল করা হয় তখন Map এবং AdvancedMarkerElement লাইব্রেরি লোড হয়।

কোড বুঝুন

টিউটোরিয়ালের এই পর্যায়ে, আমাদের আছে:

  • একটি জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়িত করে যা ডিভিতে একটি মানচিত্র তৈরি করে।
  • মানচিত্রে একটি মার্কার যোগ করতে একটি AdvancedMarkerElement তৈরি করা হয়েছে৷

একটি মানচিত্র যোগ করুন

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

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

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);
index.ts

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

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

index.js

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

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

সমগ্র পৃথিবীর মানচিত্র একটি একক চিত্র হিসাবে অফার করার জন্য হয় একটি বিশাল মানচিত্র বা খুব কম রেজোলিউশন সহ একটি ছোট মানচিত্রের প্রয়োজন হবে। ফলস্বরূপ, Google Maps এবং Maps JavaScript API-এর মধ্যে মানচিত্রের ছবিগুলিকে ম্যাপ "টাইলস" এবং "জুম লেভেল"-এ বিভক্ত করা হয়েছে। কম জুম স্তরে, মানচিত্র টাইলের একটি ছোট সেট একটি বিস্তৃত এলাকা জুড়ে; উচ্চতর জুম স্তরে, টাইলসগুলি উচ্চতর রেজোলিউশনের এবং একটি ছোট এলাকা জুড়ে। নিম্নলিখিত তালিকাটি আনুমানিক বিশদ স্তর দেখায় যা আপনি প্রতিটি জুম স্তরে দেখতে আশা করতে পারেন:

  • 1: বিশ্ব
  • 5: ল্যান্ডমাস বা মহাদেশ
  • 10: শহর
  • 15: রাস্তা
  • 20: বিল্ডিং

নিচের তিনটি ছবি জুম লেভেল 0, 7 এবং 18 এ টোকিওর একই অবস্থান প্রতিফলিত করে।

একটি মার্কার যোগ করুন

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

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

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

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

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

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

এখানে সম্পূর্ণ উদাহরণ কোড দেখুন:

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

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

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

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

সিএসএস 

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

এইচটিএমএল 

<html>
  <head>
    <title>Add Map</title>

    <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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

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

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

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

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

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

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

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

,

ভূমিকা

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

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

শুরু হচ্ছে

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

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

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

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

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

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

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

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

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

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

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

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

  7. একবার আপনি একটি API কী পেয়ে গেলে, "YOUR_API_KEY" এ ক্লিক করে এটিকে নিম্নলিখিত স্নিপেটে যোগ করুন। আপনার নিজের ওয়েব পৃষ্ঠায় ব্যবহার করতে বুটলোডার স্ক্রিপ্ট ট্যাগটি অনুলিপি করুন এবং আটকান৷ 

    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

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

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>

index.html

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

কোড বুঝুন

উদাহরণের এই পর্যায়ে, আমাদের আছে:

  • !DOCTYPE html ঘোষণা ব্যবহার করে অ্যাপ্লিকেশনটিকে HTML5 হিসাবে ঘোষণা করেছে৷
  • মানচিত্র ধরে রাখতে "মানচিত্র" নামে একটি ডিভ উপাদান তৈরি করা হয়েছে।
  • বুটস্ট্র্যাপ লোডার ব্যবহার করে মানচিত্র জাভাস্ক্রিপ্ট API লোড করা হয়েছে।

আপনার অ্যাপ্লিকেশনটিকে HTML5 হিসাবে ঘোষণা করুন

আমরা সুপারিশ করি যে আপনি আপনার ওয়েব অ্যাপ্লিকেশনের মধ্যে একটি সত্য DOCTYPE ঘোষণা করুন৷ এখানে উদাহরণগুলির মধ্যে, আমরা নীচে দেখানো হিসাবে সাধারণ HTML5 DOCTYPE ব্যবহার করে আমাদের অ্যাপ্লিকেশনগুলিকে HTML5 হিসাবে ঘোষণা করেছি:

<!DOCTYPE html>

বেশিরভাগ বর্তমান ব্রাউজারগুলি এই DOCTYPE সাথে "স্ট্যান্ডার্ড মোডে" ঘোষণা করা সামগ্রী রেন্ডার করবে যার অর্থ হল আপনার অ্যাপ্লিকেশন আরও ক্রস-ব্রাউজার অনুগত হওয়া উচিত। DOCTYPE এছাড়াও সুন্দরভাবে অবনমিত করার জন্য ডিজাইন করা হয়েছে; যে ব্রাউজারগুলি এটি বুঝতে পারে না তারা এটিকে উপেক্ষা করবে এবং তাদের বিষয়বস্তু প্রদর্শনের জন্য "quirks মোড" ব্যবহার করবে।

উল্লেখ্য যে কিছু CSS যেগুলো quirks মোডে কাজ করে সেগুলো স্ট্যান্ডার্ড মোডে বৈধ নয়। সুনির্দিষ্টভাবে, সমস্ত শতাংশ-ভিত্তিক মাপ অবশ্যই প্যারেন্ট ব্লক উপাদান থেকে উত্তরাধিকারসূত্রে প্রাপ্ত হতে হবে, এবং যদি এই পূর্বপুরুষদের মধ্যে কেউ একটি মাপ নির্দিষ্ট করতে ব্যর্থ হয়, সেগুলিকে 0 x 0 পিক্সেলের আকার বলে ধরে নেওয়া হয়। সেই কারণে, আমরা নিম্নলিখিত style ঘোষণা অন্তর্ভুক্ত করি: 

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

একটি div উপাদান তৈরি করুন

একটি ওয়েব পৃষ্ঠায় মানচিত্র প্রদর্শনের জন্য, আমাদের অবশ্যই এটির জন্য একটি স্থান সংরক্ষণ করতে হবে। সাধারণত, আমরা একটি নামযুক্ত div উপাদান তৈরি করে এবং ব্রাউজারের ডকুমেন্ট অবজেক্ট মডেল (DOM) এ এই উপাদানটির একটি রেফারেন্স পাওয়ার মাধ্যমে এটি করি।

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

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

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

/* 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% প্রস্থে সেট করা হয়েছে। উল্লেখ্য যে ডিভগুলি সাধারণত তাদের ধারণকৃত উপাদান থেকে তাদের প্রস্থ নেয় এবং খালি ডিভগুলির সাধারণত 0 উচ্চতা থাকে। এই কারণে, আপনাকে অবশ্যই div এ স্পষ্টভাবে একটি উচ্চতা সেট করতে হবে।

Maps JavaScript API লোড করুন

বুটস্ট্র্যাপ লোডার মানচিত্র জাভাস্ক্রিপ্ট API লোড করার জন্য প্রস্তুত করে ( importLibrary() বলা না হওয়া পর্যন্ত কোনো লাইব্রেরি লোড হয় না)।

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

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

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

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

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

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

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

উপরের কোডে, যখন initMap() ফাংশন কল করা হয় তখন Map এবং AdvancedMarkerElement লাইব্রেরি লোড হয়।

কোড বুঝুন

টিউটোরিয়ালের এই পর্যায়ে, আমাদের আছে:

  • একটি জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়িত করে যা ডিভিতে একটি মানচিত্র তৈরি করে।
  • মানচিত্রে একটি মার্কার যোগ করতে একটি AdvancedMarkerElement তৈরি করা হয়েছে৷

একটি মানচিত্র যোগ করুন

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

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

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);
index.ts

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

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

index.js

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

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

সমগ্র পৃথিবীর মানচিত্র একটি একক চিত্র হিসাবে অফার করার জন্য হয় একটি বিশাল মানচিত্র বা খুব কম রেজোলিউশন সহ একটি ছোট মানচিত্রের প্রয়োজন হবে। ফলস্বরূপ, Google Maps এবং Maps JavaScript API-এর মধ্যে মানচিত্রের ছবিগুলিকে ম্যাপ "টাইলস" এবং "জুম লেভেল"-এ বিভক্ত করা হয়েছে। কম জুম স্তরে, মানচিত্র টাইলের একটি ছোট সেট একটি বিস্তৃত এলাকা জুড়ে; উচ্চতর জুম স্তরে, টাইলসগুলি উচ্চতর রেজোলিউশনের এবং একটি ছোট এলাকা জুড়ে। নিম্নলিখিত তালিকাটি আনুমানিক বিশদ স্তর দেখায় যা আপনি প্রতিটি জুম স্তরে দেখতে আশা করতে পারেন:

  • 1: বিশ্ব
  • 5: ল্যান্ডমাস বা মহাদেশ
  • 10: শহর
  • 15: রাস্তা
  • 20: বিল্ডিং

নিচের তিনটি ছবি জুম লেভেল 0, 7 এবং 18 এ টোকিওর একই অবস্থান প্রতিফলিত করে।

একটি মার্কার যোগ করুন

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

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

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

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

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

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

এখানে সম্পূর্ণ উদাহরণ কোড দেখুন:

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

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

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

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

সিএসএস 

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

এইচটিএমএল 

<html>
  <head>
    <title>Add Map</title>

    <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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

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

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

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

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

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

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

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