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

আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে 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-এর মানের সমান করুন। এর ফলে গ্লিফটি দৃশ্যত লুকানো থাকে।

পরবর্তী ধাপ:

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