ওয়েব পেজে Google Map যোগ করা

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

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

এক নজরে

ম্যাপ লোড করতে, আপনার ওয়েবপেজকে এইসব কাজ করতে হবে:

• Maps JavaScript API লোড করুন বুস্ট্র্যাপ লোডার ব্যবহার করে। এখানেই আপনার API key পাস করা হয়। এটি HTML বা জাভাস্ক্রিপ্ট সোর্স ফাইলে যোগ করা যেতে পারে।
• HTML পৃষ্ঠায় ম্যাপ যোগ করুন এবং প্রয়োজনীয় CSS স্টাইল যোগ করুন।
• maps লাইব্রেরি লোড করুন এবং ম্যাপ ইনিশিয়ালাইজ করুন।

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

ওয়েবপেজে Google Maps যোগ করার জন্য gmp-map এলিমেন্ট ব্যবহার করা ভাল। এটি ওয়েব কম্পোনেন্ট ব্যবহার করে তৈরি করা একটি কাস্টম HTML এলিমেন্ট। gmp-map এলিমেন্ট ব্যবহার করে কোনও ওয়েব পেজে ম্যাপ যোগ করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন।

1. HTML পৃষ্ঠায় বুটস্ট্র্যাপ সহ script এলিমেন্ট যোগ করুন অথবা script এলিমেন্ট ছাড়া জাভাস্ক্রিপ্ট বা TypeScript সোর্স ফাইলে এটি যোগ করুন। আপনার 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>

   Google Maps JavaScript API লোড করা সম্পর্কে আরও জানুন

2. HTML পৃষ্ঠায়, একটি gmp-map এলিমেন্ট যোগ করুন। center-এর জন্য (প্রয়োজনীয়) অক্ষাংশ ও দ্রাঘিমাংশ কোঅর্ডিনেট, zoom-এর জন্য (প্রয়োজনীয়) জুম ভ্যালু, এবং প্রয়োজন হলে map-id উল্লেখ করুন (উন্নত মার্কারের মতো কিছু ফিচারের জন্য এটি প্রয়োজন)।

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>
index.html

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

TypeScript

async function init(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map')!;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.js

CSS

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

HTML

<html>
    <head>
        <title>Simple 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>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>
index.html

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

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

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

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

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

1. HTML পৃষ্ঠায় বুটস্ট্র্যাপ সহ script এলিমেন্ট যোগ করুন অথবা script এলিমেন্ট ছাড়া জাভাস্ক্রিপ্ট বা TypeScript সোর্স ফাইলে এটি যোগ করুন। আপনার 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>

   Google Maps JavaScript API লোড করা সম্পর্কে আরও জানুন

2. HTML পৃষ্ঠায়, ম্যাপ কন্টেন করার জন্য একটি div এলিমেন্ট যোগ করুন।

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

3. CSS-এ, ম্যাপের উচ্চতা ১০০% হিসেবে সেট করুন। ম্যাপটি দৃশ্যমান করার জন্য CSS height অ্যাট্রিবিউট প্রয়োজনীয়।

   #map {
     height: 100%;
   }

4. JS বা TS ফাইলে, maps লাইব্রেরি লোড করতে এবং ম্যাপ ইনিশিয়ালাইজ করতে একটি ফাংশন তৈরি করুন। center-এর জন্য অক্ষাংশ ও দ্রাঘিমাংশ স্থানাঙ্ক এবং zoom-এর জন্য জুম লেভেল উল্লেখ করুন। প্রয়োজন হলে, mapId প্রপার্টি ব্যবহার করে ম্যাপ আইডি যোগ করুন। ম্যাপ ডিফল্ট হিসেবে রাস্টার হওয়ার কারণে, "VECTOR" ম্যাপ বিকল্প উল্লেখ করে ভেক্টর ম্যাপের অনুরোধ করুন; সবচেয়ে ভালো ব্যবহারকারীর অভিজ্ঞতার জন্য ভেক্টর ম্যাপের ধরন সাজেস্ট করা হয়, কারণ এটি উন্নত ভিজ্যুয়াল ফিডেলিটি এবং ম্যাপে টিল্ট ও হেডিং কন্ট্রোল করার ক্ষমতা প্রদান করে।

   TypeScript

   let map: google.maps.Map;
   async function init(): Promise<void> {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map')!, {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.ts

   মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

   let map;
   async function init() {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map'), {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.js

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

TypeScript

let map: google.maps.Map;
async function init(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map')!, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

let map;
async function init() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.js

CSS

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

<html>
    <head>
        <title>Simple 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>
        <div id="map"></div>
    </body>
</html>
index.html

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

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

ম্যাপ ইনস্ট্যান্সে প্রপার্টি সেট ও পাওয়া

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

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

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

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,
});