ওভারভিউ

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

শ্রোতা

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

এই ধারণাগত ডকুমেন্টেশনটি আপনাকে মানচিত্র জাভাস্ক্রিপ্ট API-এর সাথে অ্যাপ্লিকেশনগুলি দ্রুত অন্বেষণ এবং বিকাশ শুরু করার জন্য ডিজাইন করা হয়েছে৷ আমরা মানচিত্র জাভাস্ক্রিপ্ট API রেফারেন্সও প্রকাশ করি।

ওহে বিশ্ব

Maps JavaScript API সম্পর্কে শেখা শুরু করার সবচেয়ে সহজ উপায় হল একটি সাধারণ উদাহরণ দেখা। নিম্নলিখিত উদাহরণ সিডনি, নিউ সাউথ ওয়েলস, অস্ট্রেলিয়াকে কেন্দ্র করে একটি মানচিত্র প্রদর্শন করে।

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

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

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

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

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>Simple 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>
    <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
উদাহরণ দেখুন

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

এমনকি এই সাধারণ উদাহরণেও, কয়েকটি জিনিস লক্ষ্য করার আছে:

  1. আমরা <!DOCTYPE html> ঘোষণা ব্যবহার করে অ্যাপ্লিকেশনটিকে HTML5 হিসাবে ঘোষণা করি।
  2. আমরা মানচিত্র ধরে রাখতে "মানচিত্র" নামে একটি div উপাদান তৈরি করি।
  3. আমরা একটি জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়িত করি যা div এ একটি মানচিত্র তৈরি করে।
  4. আমরা বুটস্ট্র্যাপ লোডার ব্যবহার করে Maps JavaScript API লোড করি।

এই পদক্ষেপগুলি নীচে ব্যাখ্যা করা হয়েছে।

Maps JavaScript API লোড করুন

বুটস্ট্র্যাপ লোডার হল মানচিত্র জাভাস্ক্রিপ্ট API লোড করার প্রস্তাবিত উপায়। JS API লোডার একটি বিকল্প হিসাবে প্রদান করা হয়. আমরা সুপারিশ করি যে আপনি উভয় পদ্ধতির পর্যালোচনা করুন এবং আপনার প্রকল্পের কোডটি কীভাবে গঠন করা হয় তার জন্য সবচেয়ে উপযুক্ত একটি বেছে নিন।

আরও বিশদ বিবরণের জন্য, মানচিত্র জাভাস্ক্রিপ্ট 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>

রানটাইমে লাইব্রেরি লোড করতে, একটি async ফাংশনের মধ্যে থেকে importLibrary() কল করতে await অপারেটর ব্যবহার করুন, এখানে দেখানো হয়েছে:

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

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

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

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.js

এনপিএম জেএস-এপিআই-লোডার প্যাকেজ

Maps JavaScript API লোড করতে NPM ব্যবহার করতে @googlemaps/js-api-loader ব্যবহার করুন। নিম্নলিখিত কমান্ড ব্যবহার করে NPM এর মাধ্যমে এটি ইনস্টল করুন:

npm install @googlemaps/js-api-loader

এই প্যাকেজটি এর সাথে অ্যাপ্লিকেশনে আমদানি করা যেতে পারে:

import { Loader } from "@googlemaps/js-api-loader"

লোডার একটি প্রতিশ্রুতি এবং কলব্যাক ইন্টারফেস প্রকাশ করে। নিম্নলিখিত ডিফল্ট প্রতিশ্রুতি পদ্ধতি load() এর ব্যবহার প্রদর্শন করে।

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

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});
index.ts

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

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

index.js

আপনার অ্যাপ্লিকেশনটিকে 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>

এই CSS ঘোষণাটি নির্দেশ করে যে মানচিত্রের ধারক <div> (আইডি map সাথে) HTML বডির উচ্চতার 100% গ্রহণ করা উচিত। মনে রাখবেন যে আমাদের অবশ্যই নির্দিষ্টভাবে <body> এবং <html> এর জন্য সেই শতাংশগুলি ঘোষণা করতে হবে।

মানচিত্র জাভাস্ক্রিপ্ট API লোড করা হচ্ছে

Maps JavaScript API একটি script ট্যাগ ব্যবহার করে লোড করা হয়, যা আপনার HTML ফাইলে ইনলাইনে যোগ করা যেতে পারে বা একটি পৃথক জাভাস্ক্রিপ্ট ফাইল ব্যবহার করে গতিশীলভাবে যোগ করা যেতে পারে। আমরা সুপারিশ করি যে আপনি উভয় পদ্ধতির পর্যালোচনা করুন এবং আপনার প্রকল্পের কোডটি কীভাবে গঠন করা হয় তার জন্য সবচেয়ে উপযুক্ত একটি বেছে নিন।

ইনলাইন লোড হচ্ছে

একটি HTML ফাইলে Maps JavaScript API ইনলাইন লোড করতে, নীচের দেখানো হিসাবে একটি script ট্যাগ যোগ করুন।

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

ডাইনামিক লোডিং

একটি পৃথক জাভাস্ক্রিপ্ট ফাইল ব্যবহার করে মানচিত্র জাভাস্ক্রিপ্ট API ইনলাইনে গতিশীলভাবে লোড করতে, নীচের উদাহরণটি দেখুন৷ এই পদ্ধতিটি আপনাকে একটি পৃথক .js ফাইল থেকে API এর সাথে কাজ করার জন্য আপনার সমস্ত কোড পরিচালনা করতে দেয় এবং এটি স্ক্রিপ্ট ট্যাগ ইনলাইন যোগ করার সমতুল্য।

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);

ডাইনামিক লোডিং

@googlemaps/js-api-loader প্যাকেজটি আরও নির্বিঘ্ন গতিশীল লোডিং অভিজ্ঞতার জন্য উপলব্ধ। এটি নিম্নলিখিতগুলির সাথে NPM এর মাধ্যমে ইনস্টল করা যেতে পারে:

npm install @googlemaps/js-api-loader

এই প্যাকেজটি এর সাথে অ্যাপ্লিকেশনে আমদানি করা যেতে পারে:

import { Loader } from "@googlemaps/js-api-loader"

লোডার একটি প্রতিশ্রুতি এবং কলব্যাক ইন্টারফেস প্রকাশ করে। নিম্নলিখিত ডিফল্ট প্রতিশ্রুতি পদ্ধতি load() এর ব্যবহার প্রদর্শন করে।

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

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});
index.ts

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

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

index.js

স্ক্রিপ্ট ট্যাগ বৈশিষ্ট্য

উপরের উদাহরণগুলিতে লক্ষ্য করুন যে script ট্যাগে বেশ কয়েকটি বৈশিষ্ট্য সেট করা আছে, যা সুপারিশ করা হয়। নিম্নলিখিত প্রতিটি বৈশিষ্ট্য একটি ব্যাখ্যা.

  • src : যে URL থেকে Maps JavaScript API লোড করা হয়, মানচিত্র জাভাস্ক্রিপ্ট API ব্যবহার করার জন্য আপনার প্রয়োজনীয় সমস্ত চিহ্ন এবং সংজ্ঞা সহ। এই উদাহরণের URL-এর দুটি প্যারামিটার রয়েছে: key , যেখানে আপনি আপনার API কী প্রদান করেন এবং callback , যেখানে আপনি মানচিত্র জাভাস্ক্রিপ্ট API সম্পূর্ণরূপে লোড হয়ে গেলে কল করার জন্য একটি গ্লোবাল ফাংশনের নাম উল্লেখ করেন। URL প্যারামিটার সম্পর্কে আরও পড়ুন।
  • async : ব্রাউজারকে অ্যাসিঙ্ক্রোনাসভাবে স্ক্রিপ্ট ডাউনলোড এবং কার্যকর করতে বলে। যখন স্ক্রিপ্টটি কার্যকর করা হয়, এটি callback প্যারামিটার ব্যবহার করে নির্দিষ্ট ফাংশনটিকে কল করবে।

লাইব্রেরি

URL এর মাধ্যমে Maps JavaScript API লোড করার সময় আপনি একটি async ফাংশন থেকে importLibrary() কল করার জন্য await অপারেটর ব্যবহার করে বিকল্পভাবে অতিরিক্ত লাইব্রেরি লোড করতে পারেন। লাইব্রেরিগুলি হল কোডের মডিউল যা প্রধান মানচিত্র জাভাস্ক্রিপ্ট API-এ অতিরিক্ত কার্যকারিতা প্রদান করে কিন্তু আপনি বিশেষভাবে অনুরোধ না করা পর্যন্ত লোড হয় না। আরও তথ্যের জন্য, মানচিত্র জাভাস্ক্রিপ্ট API-এ লাইব্রেরি দেখুন।

DOM উপাদান মানচিত্র

<div id="map"></div>

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

উপরের উদাহরণে, আমরা ম্যাপ ডিভের উচ্চতা "100%" সেট করতে CSS ব্যবহার করেছি। এটি মোবাইল ডিভাইসে মাপ মাপসই প্রসারিত হবে. ব্রাউজারের স্ক্রীন সাইজ এবং প্যাডিং এর উপর ভিত্তি করে আপনাকে প্রস্থ এবং উচ্চতার মান সমন্বয় করতে হতে পারে। উল্লেখ্য যে ডিভগুলি সাধারণত তাদের ধারণকৃত উপাদান থেকে তাদের প্রস্থ নেয় এবং খালি ডিভগুলির সাধারণত 0 উচ্চতা থাকে। এই কারণে, আপনাকে সর্বদা স্পষ্টভাবে <div> এ একটি উচ্চতা সেট করতে হবে।

মানচিত্র বিকল্প

প্রতিটি মানচিত্রের জন্য দুটি প্রয়োজনীয় বিকল্প রয়েছে: center এবং zoom ।

map = new Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

জুম লেভেল

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

zoom: 8

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

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

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

বর্তমান জুম স্তরের উপর ভিত্তি করে মানচিত্র জাভাস্ক্রিপ্ট এপিআই কীভাবে টাইলস লোড করে তার তথ্যের জন্য, মানচিত্র এবং টাইল স্থানাঙ্কের নির্দেশিকা দেখুন।

মানচিত্র বস্তু

map = new Map(document.getElementById("map"), {...});

জাভাস্ক্রিপ্ট ক্লাস যা একটি মানচিত্রের প্রতিনিধিত্ব করে তা হল Map শ্রেণী। এই শ্রেণীর অবজেক্ট একটি পৃষ্ঠায় একটি একক মানচিত্র সংজ্ঞায়িত করে। (আপনি এই শ্রেণীর একাধিক উদাহরণ তৈরি করতে পারেন — প্রতিটি বস্তু পৃষ্ঠায় একটি পৃথক মানচিত্র সংজ্ঞায়িত করবে।) আমরা জাভাস্ক্রিপ্ট new অপারেটর ব্যবহার করে এই শ্রেণীর একটি নতুন উদাহরণ তৈরি করি।

আপনি যখন একটি নতুন মানচিত্রের উদাহরণ তৈরি করেন, আপনি মানচিত্রের জন্য একটি ধারক হিসাবে পৃষ্ঠায় একটি <div> HTML উপাদান নির্দিষ্ট করেন৷ HTML নোড হল JavaScript document অবজেক্টের সন্তান, এবং আমরা document.getElementById() পদ্ধতির মাধ্যমে এই উপাদানটির একটি রেফারেন্স পাই।

এই কোডটি একটি পরিবর্তনশীল (নামকৃত map ) সংজ্ঞায়িত করে এবং একটি নতুন Map অবজেক্টে সেই ভেরিয়েবলটিকে বরাদ্দ করে। ফাংশন Map() একটি কনস্ট্রাক্টর হিসাবে পরিচিত এবং এর সংজ্ঞা নীচে দেখানো হয়েছে:

কনস্ট্রাক্টর বর্ণনা
Map(mapDiv:Node, opts?: MapOptions ) প্রদত্ত এইচটিএমএল কন্টেইনারের ভিতরে একটি নতুন মানচিত্র তৈরি করে — যা সাধারণত একটি DIV উপাদান — পাস করা যেকোনো (ঐচ্ছিক) প্যারামিটার ব্যবহার করে।

সমস্যা সমাধান

API কী এবং বিলিং ত্রুটি৷

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

যদি আপনার কোড কাজ না করে:

আপনার মানচিত্রের কোড চালু এবং চালু করতে আপনাকে সাহায্য করার জন্য, ব্রেন্ডন কেনি এবং মানো মার্কস এই ভিডিওতে কিছু সাধারণ ভুল এবং কীভাবে সেগুলি ঠিক করবেন তা নির্দেশ করেছেন৷

  • টাইপোর জন্য দেখুন. মনে রাখবেন জাভাস্ক্রিপ্ট একটি কেস-সংবেদনশীল ভাষা।
  • মূল বিষয়গুলি পরীক্ষা করুন - প্রাথমিক মানচিত্র তৈরির সাথে কিছু সাধারণ সমস্যা দেখা দেয়। যেমন:
    • নিশ্চিত করুন যে আপনি আপনার মানচিত্র বিকল্পগুলিতে zoom এবং center বৈশিষ্ট্যগুলি নির্দিষ্ট করেছেন৷
    • নিশ্চিত করুন যে আপনি একটি ডিভ উপাদান ঘোষণা করেছেন যাতে মানচিত্রটি স্ক্রিনে প্রদর্শিত হবে।
    • নিশ্চিত করুন যে মানচিত্রের জন্য ডাইভ উপাদানটির উচ্চতা রয়েছে। ডিফল্টরূপে, div উপাদানগুলি 0 এর উচ্চতা দিয়ে তৈরি করা হয় এবং তাই অদৃশ্য।
    একটি রেফারেন্স বাস্তবায়নের জন্য আমাদের উদাহরণগুলি পড়ুন।
  • সমস্যা শনাক্ত করতে সাহায্য করার জন্য একটি JavaScript ডিবাগার ব্যবহার করুন, যেমন Chrome ডেভেলপার টুলে উপলব্ধ। ত্রুটির জন্য জাভাস্ক্রিপ্ট কনসোল দেখে শুরু করুন।
  • স্ট্যাক ওভারফ্লোতে প্রশ্ন পোস্ট করুন। কীভাবে দুর্দান্ত প্রশ্ন পোস্ট করবেন তার নির্দেশিকাগুলি সহায়তা পৃষ্ঠায় উপলব্ধ।