স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

জাভাস্ক্রিপ্ট ব্যবহার করে মার্কার সহ Google Map যোগ করা

ভূমিকা

এই টিউটোরিয়াল থেকে আপনি জানতে পারবেন যে HTML, CSS ও JavaScript ব্যবহার করে কীভাবে কোনও ওয়েবপেজে মার্কার সহ Google Map যোগ করতে হয়। এছাড়াও, এটি আপনাকে ম্যাপের বিকল্প কীভাবে সেট করতে হয় এবং ম্যাপে লেবেল যোগ করার জন্য কন্ট্রোল স্লটিং কীভাবে ব্যবহার করতে হয় তা দেখায়।

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

শুরু করা

আপনার ওয়েব পেজে মার্কার সহ Google ম্যাপ তৈরি করার তিনটি ধাপ আছে:

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

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

ধাপ ১: API key পান

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

API কী পেতে এইসব ধাপ অনুসরণ করুন:

Google Cloud Console-এ যান।
প্রোজেক্ট তৈরি করুন বা বেছে নিন।
API ও যেকোনও সম্পর্কিত পরিষেবা চালু করতে চালিয়ে যান বিকল্পে ক্লিক করুন।
ক্রেডেনশিয়াল পৃষ্ঠা থেকে API key পান (এবং API key-এর উপর বিধিনিষেধ আরোপ করুন)। মনে রাখবেন: আপনার কাছে আগে থেকে কোনও বিধিনিষেধহীন API key বা ব্রাউজার বিধিনিষেধ সহ কোনও key থাকলে, আপনি সেটি ব্যবহার করতে পারেন।
কোটা চুরি প্রতিরোধ করতে এবং আপনার API কী সুরক্ষিত করতে, API কী ব্যবহার করা দেখুন।
বিলিং চালু করুন। আরও তথ্যের জন্য ব্যবহার ও বিলিং দেখুন।

API key পাওয়ার পরে, "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>

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

এখানে একটি সাধারণ HTML ওয়েব পেজের কোড দেওয়া হল:

<!DOCTYPE html>
<!--
 @license
 Copyright 2025 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- 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: "YOUR_API_KEY", v: "weekly"});</script>
  </head>
  <body>

    <!-- The map, centered at Uluru, Australia. -->
    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
    </gmp-map>

  </body>
</html>

এটি একটি খুব সাধারণ HTML পৃষ্ঠা যা পৃষ্ঠায় ম্যাপ দেখানোর জন্য gmp-map এলিমেন্ট ব্যবহার করে। ম্যাপটি ফাঁকা থাকবে কারণ আমরা এখনও কোনও JavaScript কোড যোগ করিনি।

কোডটি বুঝুন

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

!DOCTYPE html ঘোষণা ব্যবহার করে অ্যাপ্লিকেশনটিকে HTML5 হিসেবে ঘোষণা করা হয়েছে।
বুটস্ট্র্যাপ লোডার ব্যবহার করে Maps JavaScript API লোড করা হয়েছে।
ম্যাপ দেখানোর জন্য gmp-map এলিমেন্ট তৈরি করা হয়েছে।

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

আমরা সাজেস্ট করি যে আপনি নিজের ওয়েব অ্যাপ্লিকেশনে সঠিক DOCTYPE ঘোষণা করুন। এখানে দেওয়া উদাহরণে, আমরা HTML5 DOCTYPE ব্যবহার করে আমাদের অ্যাপ্লিকেশনকে HTML5 হিসেবে ঘোষণা করেছি, যেমন নিচে দেখানো হয়েছে:

<!DOCTYPE html>

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

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

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

Maps JavaScript API লোড করুন

বুটস্ট্র্যাপ লোডার, Maps JavaScript 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>

আপনার নিজস্ব API key পাওয়ার জন্য নির্দেশাবলী পেতে ধাপ ৩: API key পান দেখুন।

টিউটোরিয়ালের এই ধাপে একটি ফাঁকা উইন্ডো দেখা যায়, যেখানে শুধুমাত্র ফর্ম্যাট না করা লেবেল টেক্সট দেখানো হয়। কারণ আমরা এখনও কোনও JavaScript কোড যোগ করিনি।

`gmp-map` এলিমেন্ট তৈরি করুন

ওয়েব পেজে ম্যাপ দেখানোর জন্য, আমাদের অবশ্যই এটির জন্য একটি স্পট রিজার্ভ করতে হবে। সাধারণত, আমরা একটি gmp-map এলিমেন্ট তৈরি করে এবং ব্রাউজারের ডকুমেন্ট অবজেক্ট মডেলে (DOM) এই এলিমেন্টের রেফারেন্স পেয়ে এটি করি। আপনি এটি করার জন্য div এলিমেন্টও ব্যবহার করতে পারেন (আরও জানুন), তবে gmp-map এলিমেন্ট ব্যবহার করার জন্য সাজেস্ট করা হয়।

নিচের কোডটি gmp-map এলিমেন্টকে সংজ্ঞায়িত করে এবং center, zoom, ও map-id প্যারামিটার সেট করে।

<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
</gmp-map>

center এবং zoom বিকল্প সবসময় প্রয়োজন। উপরের কোডে, center প্রপার্টি API-কে বলে যে ম্যাপের কেন্দ্র কোথায় হবে এবং zoom প্রপার্টি ম্যাপের জুম লেভেল নির্দিষ্ট করে। জুম: ০ হল সর্বনিম্ন জুম এবং এটি সমগ্র পৃথিবী প্রদর্শন করে। আরও বেশি রেজোলিউশনে Earth-এ জুম করতে জুম ভ্যালু আরও বেশি সেট করুন।

জুম লেভেল

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

১: বিশ্ব
৫: ভূখণ্ড বা মহাদেশ
১০: শহর
১৫: রাস্তা
২০: বিল্ডিং

নিচের তিনটি ছবিতে টোকিওর একই লোকেশন ০, ৭ ও ১৮ জুম লেভেলে দেখানো হয়েছে।

নিচের কোডে CSS-এর বর্ণনা দেওয়া হয়েছে যা gmp-map এলিমেন্টের সাইজ সেট করে।

/* Set the size of the gmp-map element that contains the map */
gmp-map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

উপরের কোডে, style এলিমেন্ট gmp-map-এর সাইজ সেট করে। ম্যাপ দেখার জন্য প্রস্থ ও উচ্চতা 0px-এর বেশি সেট করুন। এই ক্ষেত্রে, gmp-map-এর উচ্চতা ৪০০ পিক্সেল এবং প্রস্থ ১০০% সেট করা হয়েছে যাতে ওয়েব পেজের সম্পূর্ণ প্রস্থ জুড়ে এটি দেখানো যায়। সবসময় উচ্চতা ও প্রস্থের স্টাইল স্পষ্টভাবে সেট করার সাজেশন দেওয়া হয়।

কন্ট্রোল স্লটিং

আপনার ম্যাপে HTML ফর্ম কন্ট্রোল যোগ করতে আপনি কন্ট্রোল স্লটিং ব্যবহার করতে পারেন। স্লট হল ম্যাপে আগে থেকে নির্ধারিত অবস্থান; কোনও এলিমেন্টের জন্য প্রয়োজনীয় অবস্থান সেট করতে slot অ্যাট্রিবিউট ব্যবহার করুন এবং gmp-map এলিমেন্টের মধ্যে এলিমেন্ট নেস্ট করুন। নিম্নলিখিত স্নিপেট ম্যাপের উপরে বাঁদিকের কোণে HTML লেবেল যোগ করার বিষয়টি দেখায়।

<!-- The map, centered at Uluru, Australia. -->
<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
  <div id="controls" slot="control-inline-start-block-start">
    <h3>My Google Maps Demo</h3>
  </div>
</gmp-map>

ধাপ ৩: JavaScript কোড যোগ করা

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

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.ts

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

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.js

initMap() কল করা হলে উপরের কোডটি নিম্নলিখিত কাজগুলি করে:

maps এবং marker লাইব্রেরি লোড করে।
DOM থেকে ম্যাপ এলিমেন্ট পায়।
ইনার ম্যাপে অতিরিক্ত ম্যাপ বিকল্প সেট করে।
ম্যাপে একটি মার্কার যোগ করে।

ম্যাপ অবজেক্ট পান এবং বিকল্প সেট করুন

innerMap Map class-এর একটি ইনস্ট্যান্সকে দেখায়। ম্যাপের বিকল্প সেট করতে, ম্যাপ এলিমেন্ট থেকে innerMap ইনস্ট্যান্স পান এবং setOptions কল করুন। নিম্নলিখিত স্নিপেট DOM থেকে innerMap ইনস্ট্যান্স পাওয়া, তারপর setOptions কল করা দেখায়:

// Get the gmp-map element.
const mapElement = document.querySelector(
  "gmp-map"
) as google.maps.MapElement;

// Get the inner map.
const innerMap = mapElement.innerMap;

// Set map options.
innerMap.setOptions({
  mapTypeControl: false,
});

ম্যাপ লোড হওয়া পর্যন্ত অপেক্ষা করুন

gmp-map এলিমেন্ট ব্যবহার করার সময়, ম্যাপ অ্যাসিঙ্ক্রোনাসভাবে লোড হয়। ইনিশিয়ালাইজেশনের সময় অন্য অনুরোধ করা হলে (যেমন, জিওলোকেশন বা জায়গার বিবরণ সংক্রান্ত অনুরোধ) রেস কন্ডিশন তৈরি হতে পারে। ম্যাপ সম্পূর্ণ লোড হওয়ার পরেই আপনার কোড রান করবে, এটি নিশ্চিত করতে আপনার ইনিশিয়ালাইজেশন ফাংশনে addListenerOnce আইডল ইভেন্ট হ্যান্ডলার ব্যবহার করুন, যেমন এখানে দেখানো হয়েছে:

// Do things once the map has loaded.
google.maps.event.addListenerOnce(innerMap, 'idle', () => {
    // Run this code only after the map has loaded.
    console.log("The map is now ready!");
});

এটি করলে, ম্যাপ লোড হওয়ার পরেই আপনার কোড রান করবে; অ্যাপের লাইফসাইকেলে হ্যান্ডলার একবারই ট্রিগার হয়।

ইন্টার্নাল পারফর্ম্যান্স অপ্টিমাইজেশন সম্পর্কে নোট:

পৃষ্ঠা লোড হওয়ার গতি উন্নত করতে, Maps JavaScript API ইন্টার‍্যাক্টিভ কন্টেন্ট লোড করার প্রক্রিয়া অভ্যন্তরীণভাবে স্থগিত রাখতে পারে, যতক্ষণ না এলিমেন্ট বা কন্টেনার ভিউপোর্টের কাছাকাছি আসে। এইসব ইন্টার্নাল অপ্টিমাইজেশন যেকোনও সময়, কোনও বিজ্ঞপ্তি ছাড়াই পরিবর্তন করা হতে পারে। এগুলি পারফর্ম্যান্স উন্নত করার জন্য ডিজাইন করা হয়েছে এবং বিলিং ম্যানেজ করার জন্য ব্যবহার করা উচিত নয়। কোনও এলিমেন্ট দৃশ্যমান না হওয়া পর্যন্ত বিলিং যাতে না হয় তা নিশ্চিত করতে, আপনার অ্যাপ্লিকেশন কোডে এটি তৈরি করার প্রসেস পিছিয়ে দিন।

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

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

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.ts

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

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.js

CSS

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

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

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <!-- The map, centered at Uluru, Australia. -->
        <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
            <div id="controls" slot="control-inline-start-block-start">
                <h3>My Google Maps Demo</h3>
            </div>
        </gmp-map>
    </body>
</html>index.html

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

পরামর্শ ও সমস্যার সমাধান

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

ভূমিকা

শুরু করা

ধাপ ১: API key পান

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

কোডটি বুঝুন

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

Maps JavaScript API লোড করুন

gmp-map এলিমেন্ট তৈরি করুন

জুম লেভেল

কন্ট্রোল স্লটিং

ধাপ ৩: JavaScript কোড যোগ করা

TypeScript

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

ম্যাপ অবজেক্ট পান এবং বিকল্প সেট করুন

ম্যাপ লোড হওয়া পর্যন্ত অপেক্ষা করুন

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

TypeScript

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

CSS

HTML

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

পরামর্শ ও সমস্যার সমাধান

`gmp-map` এলিমেন্ট তৈরি করুন