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

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

একটি ওয়েব পৃষ্ঠায় একটি Google মানচিত্র যোগ করুন

আপনি HTML, CSS, এবং JavaScript কোড ব্যবহার করে একটি ওয়েব পেজে গুগল ম্যাপ যোগ করতে পারেন। এই পেজটিতে দেখানো হয়েছে কীভাবে একটি ওয়েব পেজে ম্যাপ যোগ করতে হয় এবং তারপর প্রোগ্রাম্যাটিকভাবে ম্যাপ ইনস্ট্যান্সটি অ্যাক্সেস করতে হয়।

gmp-map এলিমেন্ট ব্যবহার করে একটি ম্যাপ যোগ করুন
div এলিমেন্ট এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি মানচিত্র যোগ করুন
ম্যাপ ইনস্ট্যান্সে প্রোপার্টি সেট এবং গেট করুন

সংক্ষিপ্ত বিবরণ

মানচিত্র লোড করার জন্য, আপনার ওয়েব পেজকে নিম্নলিখিত কাজগুলো করতে হবে:

একটি বুটস্ট্র্যাপ লোডার ব্যবহার করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করুন । এখানেই আপনার এপিআই কী পাস করা হয়। এটি এইচটিএমএল অথবা জাভাস্ক্রিপ্ট সোর্স ফাইল, যেকোনোটিতেই যোগ করা যেতে পারে।
HTML পেজে ম্যাপটি যোগ করুন এবং প্রয়োজনীয় CSS স্টাইলগুলো যুক্ত করুন।
maps লাইব্রেরিটি লোড করুন এবং ম্যাপটি প্রারম্ভিক করুন।

`gmp-map` এলিমেন্ট ব্যবহার করে একটি ম্যাপ যোগ করুন

একটি ওয়েব পেজে গুগল ম্যাপ যোগ করার জন্য gmp-map এলিমেন্টটি সবচেয়ে পছন্দের উপায়। এটি ওয়েব কম্পোনেন্ট ব্যবহার করে তৈরি একটি কাস্টম এইচটিএমএল (HTML) এলিমেন্ট। gmp-map এলিমেন্ট ব্যবহার করে একটি ওয়েব পেজে ম্যাপ যোগ করতে, নিম্নলিখিত ধাপগুলো অনুসরণ করুন।

একটি HTML পৃষ্ঠায় বুটস্ট্র্যাপ সম্বলিত একটি script এলিমেন্ট যোগ করুন, অথবা script এলিমেন্ট ছাড়াই এটিকে একটি জাভাস্ক্রিপ্ট বা টাইপস্ক্রিপ্ট সোর্স ফাইলে যোগ করুন। আপনার API কী এবং অন্য যেকোনো অপশন দিয়ে বুটস্ট্র্যাপটি কনফিগার করুন। আপনি ডাইনামিক লাইব্রেরি ইম্পোর্ট অথবা সরাসরি স্ক্রিপ্ট লোডিং-এর মধ্যে যেকোনো একটি বেছে নিতে পারেন। এই উদাহরণটি একটি HTML পৃষ্ঠায় সরাসরি স্ক্রিপ্ট লোডিং বুটস্ট্র্যাপ যোগ করা দেখাচ্ছে:
```
<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>
```
গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করার বিষয়ে আরও জানুন
HTML পেজে একটি gmp-map এলিমেন্ট যোগ করুন। center জন্য অক্ষাংশ ও দ্রাঘিমাংশ স্থানাঙ্ক (আবশ্যক), zoom জন্য একটি জুম ভ্যালু (আবশ্যক), এবং প্রয়োজন হলে একটি map-id উল্লেখ করুন (অ্যাডভান্সড মার্কারের মতো কিছু ফিচারের জন্য এটি আবশ্যক)। ম্যাপটি দৃশ্যমান হওয়ার জন্য CSS-এর height অ্যাট্রিবিউটটি আবশ্যক। এটি HTML অথবা CSS যেকোনোটিতেই উল্লেখ করা যেতে পারে। এই উদাহরণে সরলতার জন্য height স্টাইল অ্যাট্রিবিউটটি HTML-এ উল্লেখ করা হয়েছে।
```
<gmp-map
    center="37.4220656,-122.0840897"
    zoom="10"
    map-id="DEMO_MAP_ID"
    style="height: 500px"></gmp-map>index.html
```

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

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></script>
    </head>
    <body>
        <gmp-map
            center="37.4220656,-122.0840897"
            zoom="10"
            map-id="DEMO_MAP_ID"
            style="height: 500px"></gmp-map>
    </body>
</html>index.html

`div` এলিমেন্ট (লেগ্যাসি) এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি ম্যাপ যোগ করুন

ওয়েব পেজে div এলিমেন্ট ব্যবহার করে ম্যাপ যোগ করতে নিচের ধাপগুলো অনুসরণ করুন।

একটি HTML পৃষ্ঠায় বুটস্ট্র্যাপ সম্বলিত একটি script এলিমেন্ট যোগ করুন, অথবা script এলিমেন্ট ছাড়াই এটিকে একটি জাভাস্ক্রিপ্ট বা টাইপস্ক্রিপ্ট সোর্স ফাইলে যোগ করুন। আপনার API কী এবং অন্য যেকোনো অপশন দিয়ে বুটস্ট্র্যাপটি কনফিগার করুন। আপনি ডাইনামিক লাইব্রেরি ইম্পোর্ট অথবা সরাসরি স্ক্রিপ্ট লোডিং-এর মধ্যে যেকোনো একটি বেছে নিতে পারেন। এই উদাহরণটি একটি HTML পৃষ্ঠায় ডাইনামিক বুটস্ট্র্যাপ যোগ করার পদ্ধতি দেখাচ্ছে:
```
<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 পেজে ম্যাপটি রাখার জন্য একটি div এলিমেন্ট যোগ করুন।
```
<div id="map"></div>
```
CSS-এ ম্যাপের উচ্চতা ১০০% সেট করুন। ম্যাপটি দৃশ্যমান হওয়ার জন্য CSS height অ্যাট্রিবিউটটি আবশ্যক।
```
#map {
  height: 100%;
}
```
জাভাস্ক্রিপ্ট ফাইলে, maps লাইব্রেরি লোড করতে এবং ম্যাপটি ইনিশিয়ালাইজ করতে একটি ফাংশন তৈরি করুন। center জন্য অক্ষাংশ ও দ্রাঘিমাংশের স্থানাঙ্ক এবং zoom -এর জন্য ব্যবহৃত জুম লেভেল নির্দিষ্ট করুন। প্রয়োজন হলে, map-id প্রপার্টি ব্যবহার করে একটি ম্যাপ আইডি যোগ করুন। যেহেতু ম্যাপটি ডিফল্টভাবে রাস্টার হবে, তাই ‘ renderingType: google.maps.RenderingType.VECTOR ’ ম্যাপ অপশনটি উল্লেখ করে একটি ভেক্টর ম্যাপের জন্য অনুরোধ করুন; সেরা ইউজার এক্সপেরিয়েন্সের জন্য ভেক্টর ম্যাপ টাইপটি সুপারিশ করা হয়, কারণ এটি উন্নত ভিজ্যুয়াল ফিডেলিটি প্রদানের পাশাপাশি ম্যাপের টিল্ট এবং হেডিং নিয়ন্ত্রণ করার ক্ষমতা দেয়।
```
let map;
async function initMap() {
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: RenderingType.VECTOR,
    });
}
initMap();index.js
```

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

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

let map: google.maps.Map;
async function initMap(): Promise<void> {
    const { Map, RenderingType } = (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,
        renderingType: RenderingType.VECTOR,
    });
}

initMap();index.ts

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

let map;
async function initMap() {
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: RenderingType.VECTOR,
    });
}
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>

        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_core-maps" });</script>
    </body>
</html>index.html

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

JSFiddle.net

ম্যাপ ইনস্ট্যান্সে প্রোপার্টি সেট এবং গেট করুন

ম্যাপ ইনস্ট্যান্সটির সাথে ইন্টারঅ্যাক্ট করতে, ধারণকারী এলিমেন্টটি সিলেক্ট করুন। আপনি gmp-map এলিমেন্ট নাকি div এলিমেন্ট ব্যবহার করেছেন, তার উপর নির্ভর করে এই কাজটি করার কোড ভিন্ন হবে।

একটি `gmp-map` এলিমেন্ট থেকে একটি ম্যাপ ইনস্ট্যান্স পান

gmp-map এলিমেন্ট ব্যবহার করার সময় ম্যাপ ইনস্ট্যান্সটি পেতে, এখানে দেখানো অনুযায়ী document.querySelector ব্যবহার করে একটি mapElement ইনস্ট্যান্স পুনরুদ্ধার করুন।

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

তারপর mapElement ইনস্ট্যান্সটিতে প্রোপার্টিগুলো সেট করুন:

mapElement.zoom = 8;

MapElement ক্লাস অভ্যন্তরীণভাবে Map ক্লাস ব্যবহার করে; এখানে দেখানো অনুযায়ী MapElement.innerMap প্রপার্টি ব্যবহার করে Map ক্লাসটি অ্যাক্সেস করুন:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

একটি `div` এলিমেন্ট থেকে একটি ম্যাপ ইনস্ট্যান্স নিন

div এলিমেন্ট ব্যবহার করার সময়, ইনিশিয়ালাইজেশনের সময়ে ম্যাপ ইনস্ট্যান্সটি নিন এবং অপশনগুলো সেট করুন:

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

প্রারম্ভিকীকরণের পরে, এখানে দেখানো অনুযায়ী map ইনস্ট্যান্সে অপশনগুলো সেট করুন:

map.setOptions({
    zoom: 8,
});

সংক্ষিপ্ত বিবরণ

gmp-map এলিমেন্ট ব্যবহার করে একটি ম্যাপ যোগ করুন

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

div এলিমেন্ট (লেগ্যাসি) এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি ম্যাপ যোগ করুন

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

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

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

সিএসএস

এইচটিএমএল

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

ম্যাপ ইনস্ট্যান্সে প্রোপার্টি সেট এবং গেট করুন

একটি gmp-map এলিমেন্ট থেকে একটি ম্যাপ ইনস্ট্যান্স পান

একটি div এলিমেন্ট থেকে একটি ম্যাপ ইনস্ট্যান্স নিন

`gmp-map` এলিমেন্ট ব্যবহার করে একটি ম্যাপ যোগ করুন

`div` এলিমেন্ট (লেগ্যাসি) এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি ম্যাপ যোগ করুন

একটি `gmp-map` এলিমেন্ট থেকে একটি ম্যাপ ইনস্ট্যান্স পান

একটি `div` এলিমেন্ট থেকে একটি ম্যাপ ইনস্ট্যান্স নিন