Maps Demo Key পান: Maps Demo Key-এর সাহায্যে কোনও খরচ ছাড়াই বাছাই করা Maps JavaScript API এবং Places UI Kit ফিচার ব্যবহার করে দেখুন—কোনও বিলিং তথ্য প্রয়োজন নেই।

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

মার্কারের প্রাথমিক কাস্টমাইজেশন

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

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

এই উদাহরণে দেখানো হয়েছে যে কীভাবে নিম্নলিখিত উপায়ে মার্কার কাস্টমাইজ করতে হয়: শীর্ষক টেক্সট যোগ করা, মার্কার স্কেল করা, ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করা, বর্ডারের রঙ পরিবর্তন করা, গ্লিফের রঙ পরিবর্তন করা, গ্লিফ লুকানো।

TypeScript

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

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

    // Each PinElement is paired with a marker to demonstrate setting each parameter.

    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);

    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);

    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);

    const pinTextGlyph = new PinElement({
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}

void init();index.ts

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

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

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

    // Each PinElement is paired with a marker to demonstrate setting each parameter.

    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);

    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);

    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);

    const pinTextGlyph = new PinElement({
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}

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>Advanced Marker Basic Customization</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.419,-122.02"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>index.html

এই পৃষ্ঠায় দেখানো হয়েছে যে কীভাবে নিম্নলিখিত উপায়ে মার্কার কাস্টমাইজ করতে হয়:

টাইটেল টেক্সট যোগ করুন
মার্কার স্কেল করা
ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করা
বর্ডারের রঙ পরিবর্তন করা
গ্লিফের রঙ পরিবর্তন করা
গ্লিফে টেক্সট ব্যবহার করা
গ্লিফ লুকান

উন্নত মার্কারের অংশ। — **ছবি ১**: উন্নত মার্কারের বিভিন্ন অংশ।

উন্নত মার্কার, মার্কার সংজ্ঞায়িত করতে দুটি ক্লাস ব্যবহার করে: AdvancedMarkerElement ক্লাস প্রাথমিক প্যারামিটার (position, title এবং map) প্রদান করে এবং PinElement ক্লাসে আরও কাস্টমাইজেশনের বিকল্প থাকে।

ম্যাপে মার্কার যোগ করতে, আপনাকে প্রথমে marker লাইব্রেরি লোড করতে হবে যা AdvancedMarkerElement এবং PinElement ক্লাস প্রদান করে।

নিম্নলিখিত স্নিপেটটি নতুন PinElement তৈরি করার কোড দেখায়, তারপর এটি একটি মার্কারে প্রয়োগ করে।

// Create a pin element.
const myPin = new PinElement({
    scale: 1.5,
});
// Create a marker.
const myMarker = new AdvancedMarkerElement({
    position: { lat: 37.4239163, lng: -122.0947209 },
});
// Append the pin to the marker.
myMarker.append(myPin);
// Append the marker to the map.
mapElement.append(myMarker);

কাস্টম HTML এলিমেন্ট ব্যবহার করে তৈরি করা ম্যাপে, মার্কারের জন্য প্রাথমিক প্যারামিটার gmp-advanced-marker HTML এলিমেন্ট ব্যবহার করে ঘোষণা করা হয়; PinElement ক্লাস ব্যবহার করে এমন যেকোনও কাস্টমাইজেশন প্রোগ্রাম্যাটিক্যালি প্রয়োগ করতে হবে। এটি করতে, আপনার কোডকে HTML পৃষ্ঠা থেকে gmp-advanced-marker এলিমেন্ট অবশ্যই ফিরিয়ে আনতে হবে। নিম্নলিখিত স্নিপেট gmp-advanced-marker এলিমেন্টের কালেকশন কোয়েরি করার কোড দেখায়, তারপর PinElement-এ ঘোষণা করা কাস্টমাইজেশন প্রয়োগ করার জন্য ফলাফলের মাধ্যমে ইটারেট করে।

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.append(pin);
}

শিরোনামের টেক্সট যোগ করুন

কার্সর কোনও মার্কারের উপর হোভার করলে শীর্ষক টেক্সট দেখা যায়। স্ক্রিন রিডার দিয়ে শীর্ষক টেক্সট পড়া যায়।

প্রোগ্রাম্যাটিক্যালি শীর্ষক টেক্সট যোগ করতে, AdvancedMarkerElement.title বিকল্প ব্যবহার করুন:

// Default marker with title text (no PinElement).
const markerWithText = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
mapElement.append(markerWithText);index.js

কাস্টম HTML এলিমেন্ট ব্যবহার করে তৈরি করা মার্কারের সাথে শীর্ষক টেক্সট যোগ করতে, title অ্যাট্রিবিউট ব্যবহার করুন:

<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>index.html

মার্কার স্কেল করুন

মার্কার স্কেল করতে, scale বিকল্প ব্যবহার করুন।

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerScaled = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);index.ts

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

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerScaled = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerScaled.append(pinScaled);
mapElement.append(markerScaled);index.js

ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করুন

মার্কারের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করতে PinElement.background বিকল্প ব্যবহার করুন:

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerBackground = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);index.ts

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

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerBackground = new AdvancedMarkerElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerBackground.append(pinBackground);
mapElement.append(markerBackground);index.js

বর্ডারের রঙ পরিবর্তন করুন

মার্কারের বর্ডারের রঙ পরিবর্তন করতে PinElement.borderColor বিকল্প ব্যবহার করুন:

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerBorder = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);index.ts

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerBorder = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerBorder.append(pinBorder);
mapElement.append(markerBorder);index.js

গ্লিফের রঙ পরিবর্তন করুন

মার্কারের গ্লিফের রঙ পরিবর্তন করতে PinElement.glyphColor বিকল্প ব্যবহার করুন:

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);index.ts

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

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.append(pinGlyph);
mapElement.append(markerGlyph);index.js

গ্লিফে টেক্সট ব্যবহার করা

ডিফল্ট গ্লিফকে টেক্সট ক্যারেক্টার দিয়ে বদল করতে PinElement.glyphText বিকল্প ব্যবহার করুন। PinElement-এর টেক্সট গ্লিফ PinElement-এর সাথে স্কেল করে এবং এর ডিফল্ট রঙ PinElement-এর ডিফল্ট glyphColor-এর সাথে মেলে।

TypeScript

const pinTextGlyph = new PinElement({
    glyphText: 'T',
    glyphColor: 'white',
});
const markerGlyphText = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);index.ts

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

const pinTextGlyph = new PinElement({
    glyphText: 'T',
    glyphColor: 'white',
});
const markerGlyphText = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.append(pinTextGlyph);
mapElement.append(markerGlyphText);index.js

গ্লিফ লুকান

মার্কারের গ্লিফ লুকাতে PinElement.glyphText বিকল্পটি খালি স্ট্রিংয়ে সেট করুন:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);index.ts

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

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);index.js

অথবা, PinElement.glyphColor-এর ভ্যালু PinElement.background-এর ভ্যালুর সমান সেট করুন। এর ফলে গ্লিফটি দৃশ্যত লুকানো থাকে।

পরবর্তী ধাপ:

গ্রাফিক্স সহ মার্কার তৈরি করা