ম্যাপে মার্কার যোগ করা

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

ম্যাপে কোনও একটি লোকেশন দেখাতে মার্কার ব্যবহার করুন। এই পৃষ্ঠায় দেখানো হয়েছে কীভাবে প্রোগ্রাম্যাটিক পদ্ধতিতে এবং কাস্টম HTML এলিমেন্ট ব্যবহার করে ম্যাপে মার্কার যোগ করতে হয়।

উন্নত মার্কার লাইব্রেরি লোড করা

ম্যাপে উন্নত মার্কার যোগ করতে, আপনার ম্যাপ কোডে অবশ্যই marker লাইব্রেরি লোড করতে হবে, যা AdvancedMarkerElement এবং PinElement ক্লাস প্রদান করে। আপনার অ্যাপ প্রোগ্রাম্যাটিক উপায়ে অথবা HTML ব্যবহার করে মার্কার লোড করুক না কেন, এটি প্রযোজ্য হয়। এটি করতে, আপনার অ্যাপকে প্রথমে Maps JavaScript API লোড করতে হবে।

আপনি লাইব্রেরি লোড করার জন্য যে পদ্ধতি ব্যবহার করেন তা নির্ভর করে আপনার ওয়েব পৃষ্ঠা কীভাবে Maps JavaScript API লোড করে তার উপর।

  • আপনার ওয়েবপেজে ডায়নামিক স্ক্রিপ্ট লোডিং ব্যবহার করা হলে, রানটাইমে মার্কার লাইব্রেরি যোগ করুন এবং AdvancedMarkerElement (এবং ঐচ্ছিকভাবে PinElement) ইমপোর্ট করুন, যেমন এখানে দেখানো হয়েছে।

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • আপনার ওয়েবপেজে ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করা হলে, নিম্নলিখিত স্নিপেটে দেখানো মতো লোডিং স্ক্রিপ্টে libraries=marker যোগ করুন। এটি করলে, AdvancedMarkerElement ও PinElement দুটিই ইমপোর্ট করা হবে।

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

ম্যাপ আইডি সেট করা

উন্নত মার্কার ব্যবহার করার জন্য ম্যাপ আইডি প্রয়োজন (DEMO_MAP_ID ব্যবহার করা যেতে পারে)। ম্যাপ বিকল্পে ম্যাপ আইডি সেট করুন, যেমন এখানে দেখানো হয়েছে:

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

আপনি ওয়েব কম্পোনেন্ট ব্যবহার করলে, সরাসরি gmp-map এলিমেন্টে ম্যাপ আইডি সেট করতে পারবেন:

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

ম্যাপ আইডি সম্পর্কে আরও জানুন।

কাস্টম HTML এলিমেন্ট ব্যবহার করে মার্কার যোগ করা

কাস্টম HTML এলিমেন্ট ব্যবহার করে উন্নত মার্কার যোগ করতে, gmp-map এলিমেন্টে gmp-advanced-marker চাইল্ড এলিমেন্ট যোগ করুন। নিম্নলিখিত স্নিপেটে একটি ওয়েবপেজে মার্কার যোগ করা দেখানো হয়েছে:

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

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

এই উদাহরণে HTML ব্যবহার করে মার্কার সহ ম্যাপ তৈরি করা দেখানো হয়েছে।

TypeScript

// This example adds a map with markers, using web components.

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

// This example adds a map with markers, using web components.

CSS

/* Note: This CSS file is intentionally blank. */

HTML

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>

প্রোগ্রামাটিক পদ্ধতিতে মার্কার যোগ করা

প্রোগ্রামাটিক উপায়ে ম্যাপে অ্যাডভান্সড মার্কার যোগ করতে, একটি নতুন AdvancedMarkerElement তৈরি করুন এবং এই উদাহরণে দেখানো পদ্ধতিতে সেটি ম্যাপে যোগ করুন:

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}

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

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}

ওয়েব কম্পোনেন্ট ব্যবহার করলেই শুধু এলিমেন্ট যোগ করা যায়। ম্যাপ লোড করার জন্য div এলিমেন্ট ব্যবহার করা হলে, এখানে দেখানো ম্যাপ ইনস্ট্যান্সের সাথে মার্কার অ্যাসোসিয়েট করতে map প্রপার্টি ব্যবহার করুন:

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

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

মার্কার সরানো

ম্যাপ থেকে মার্কার সরাতে, marker.map অথবা marker.position-কে null হিসেবে সেট করুন।

// Set the map to null.
marker.map = null;

// Set the position to null.
marker.position = null;

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

এই উদাহরণে দেখানো হয়েছে কীভাবে ম্যাপে মার্কার যোগ করতে হয়।

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
void init();

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

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
void init();

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

HTML

<html>
    <head>
        <title>Default Advanced Marker</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="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>

পরবর্তী ধাপ