বেসিক মার্কার কাস্টমাইজেশন, বেসিক মার্কার কাস্টমাইজেশন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

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

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

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

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } =
        (await google.maps.importLibrary(
            'marker'
        )) as google.maps.MarkerLibrary;

    // 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({
        //@ts-ignore
        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({
        //@ts-ignore
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}

initMap();
index.ts

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপস ব্যবহারের নির্দেশিকাটি পড়ুন।

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

const parser = new DOMParser();
const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker'));
    // 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({
        //@ts-ignore
        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({
        //@ts-ignore
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}
initMap();
index.js

সিএসএস

/* 
 * 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>
    <head>
        <title>Advanced Marker Basic Customization</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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_advanced-markers" });</script>
    </head>
    <body>
        <gmp-map
            center="37.419,-122.02"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

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

JSFiddle.net

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

• শিরোনাম টেক্সট যোগ করুন
• মার্কারটি স্কেল করুন
• পটভূমির রঙ পরিবর্তন করুন
• বর্ডারের রঙ পরিবর্তন করুন
• গ্লিফের রঙ পরিবর্তন করুন
• একটি গ্লিফে টেক্সট ব্যবহার করুন
• গ্লিফটি লুকান

চিত্র ১ : অ্যাডভান্সড মার্কারের অংশসমূহ।

অ্যাডভান্সড মার্কার দুটি ক্লাস ব্যবহার করে মার্কার নির্ধারণ করে: 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);

কাস্টম এইচটিএমএল এলিমেন্ট ব্যবহার করে তৈরি করা ম্যাপে, একটি মার্কারের মৌলিক প্যারামিটারগুলো gmp-advanced-marker এইচটিএমএল এলিমেন্ট ব্যবহার করে ঘোষণা করা হয়; PinElement ক্লাস ব্যবহার করে করা যেকোনো কাস্টমাইজেশন প্রোগ্রাম্যাটিকভাবে প্রয়োগ করতে হবে। এটি করার জন্য, আপনার কোডকে এইচটিএমএল পেজ থেকে 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="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

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

মার্কারের আকার পরিবর্তন করতে, scale অপশনটি ব্যবহার করুন।

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

// 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 অপশনটি ব্যবহার করুন:

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

// 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 অপশনটি ব্যবহার করুন:

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

// 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 অপশনটি ব্যবহার করুন:

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

// 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 সাথে মিলে যায়।

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

const pinTextGlyph = new PinElement({
    //@ts-ignore
    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({
    //@ts-ignore
    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 অপশনটিকে একটি খালি স্ট্রিং-এ সেট করুন:

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

// Hide the glyph.
const pinNoGlyph = new PinElement({
    //@ts-ignore
    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({
    //@ts-ignore
    glyphText: '',
});
const markerNoGlyph = new AdvancedMarkerElement({
    position: { lat: 37.415, lng: -122.005 },
});
markerNoGlyph.append(pinNoGlyph);
mapElement.append(markerNoGlyph);
index.js

বিকল্পভাবে, PinElement.glyphColor PinElement.background এর সমান মানে সেট করুন। এর ফলে গ্লিফটি দৃশ্যত আড়াল হয়ে যায়।

পরবর্তী পদক্ষেপ:

• গ্রাফিক্স দিয়ে মার্কার তৈরি করুন