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

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

ভূমিকা

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

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

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

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

    <!-- 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: "beta"});</script>
  </body>
</html>index.html

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

JSFiddle.net CodeSandbox.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>

    <!-- 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: "beta"});</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 এর আকার এবং রঙ সেট করে।

/* 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% প্রস্থে সেট করা হয়েছে।

বুটস্ট্র্যাপ লোডার মানচিত্র জাভাস্ক্রিপ্ট 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 কী পান ।

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

এই বিভাগটি আপনাকে দেখায় কিভাবে আপনার ওয়েব পৃষ্ঠায় 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 এবং AdvancedMarkerView লাইব্রেরি লোড হয়।

কোড বোঝা

নীচের কোডটি একটি নতুন 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

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

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

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

নীচের কোডটি মানচিত্রে একটি মার্কার রাখে। 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

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

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

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

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

গুগল ক্লাউড কনসোলে যান।
একটি প্রকল্প তৈরি করুন বা নির্বাচন করুন।
API এবং যেকোনো সম্পর্কিত পরিষেবা সক্ষম করতে অবিরত ক্লিক করুন।
শংসাপত্র পৃষ্ঠায়, একটি API কী পান (এবং API কী সীমাবদ্ধতা সেট করুন)। দ্রষ্টব্য: আপনার যদি একটি বিদ্যমান অনিয়ন্ত্রিত API কী, বা ব্রাউজার সীমাবদ্ধতা সহ একটি কী থাকে, আপনি সেই কীটি ব্যবহার করতে পারেন৷
কোটা চুরি রোধ করতে এবং আপনার API কী সুরক্ষিত করতে, API কী ব্যবহার করা দেখুন।
বিলিং সক্ষম করুন। আরও তথ্যের জন্য ব্যবহার এবং বিলিং দেখুন।
এই পৃষ্ঠা থেকে এই টিউটোরিয়ালের সম্পূর্ণ কোডটি আপনার পাঠ্য সম্পাদকে অনুলিপি করুন।

ইউআরএলে key প্যারামিটারের মানটি আপনার নিজস্ব API কী দিয়ে প্রতিস্থাপন করুন (এটি সেই API কী যা আপনি সবেমাত্র পেয়েছেন)।

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

এই ফাইলটিকে একটি নাম দিয়ে সংরক্ষণ করুন যা .html দিয়ে শেষ হয়, যেমন index.html ।
আপনার ডেস্কটপ থেকে আপনার ব্রাউজারে টেনে এনে একটি ওয়েব ব্রাউজারে HTML ফাইল লোড করুন। বিকল্পভাবে, ফাইলটিতে ডাবল-ক্লিক করা বেশিরভাগ অপারেটিং সিস্টেমে কাজ করে।

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

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