শৈলী তথ্য বৈশিষ্ট্য

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

ডেটাসেট ফিচার লেয়ারের style প্রোপার্টি google.maps.FeatureStyleFunction এ সেট করে ডেটা ফিচারে স্টাইল প্রয়োগ করুন, যাতে স্টাইলিং লজিক থাকতে পারে, অথবা google.maps.FeatureStyleOptions থাকতে পারে, যাতে লেয়ারের জন্য সমস্ত ফিচার একইভাবে স্টাইল করা যায়। আপনি ফিল (রঙ, অস্বচ্ছতা), স্ট্রোক (রঙ, অস্বচ্ছতা, স্ট্রোকের ওজন) এবং ব্যাস (পয়েন্ট) এর জন্য ডেটা ফিচারে স্টাইল প্রয়োগ করতে পারেন। এই পৃষ্ঠাটি দেখায় কিভাবে প্রোগ্রাম্যাটিকভাবে একটি ডেটাসেট অ্যাক্সেস করতে হয় এবং এর ফিচারগুলি স্টাইল করতে হয়, এবং পয়েন্ট, বহুভুজ এবং পলিলাইন জ্যামিতির উপর ভিত্তি করে ডেটা ফিচারের স্টাইলিং উদাহরণগুলি নিয়ে আলোচনা করা হয়।

ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং ডেটাসেট তৈরি করতে ব্যবহৃত ভূ-স্থানিক ডেটা ফাইল থেকে প্রদত্ত অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্কের উপর ভিত্তি করে ডেটা বৈশিষ্ট্যগুলি রেন্ডার করে।

ডেটা বৈশিষ্ট্য বৈশিষ্ট্য

একটি ডেটাসেটের সমস্ত ডেটা ফিচার স্টাইল ফাংশনে অ্যাক্সেস করা যেতে পারে। ডেটা ফিচার অ্যাট্রিবিউট পেতে, প্রথমে ডেটাসেট বৈশিষ্ট্যটি পান, যাতে ডেটাসেটের মধ্যে সমস্ত ডেটা থাকে, তারপর আপনার পছন্দসই নির্দিষ্ট ডেটা অ্যাট্রিবিউটটি পান, যেমনটি এখানে দেখানো হয়েছে:

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

// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
index.ts

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

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

// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
index.js

বৈশিষ্ট্য শৈলী বিকল্পগুলি

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

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

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
index.ts

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

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

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
index.js

বৈশিষ্ট্য শৈলী ফাংশন

ডেটাসেট বৈশিষ্ট্যগুলিকে স্টাইল করার জন্য লজিক সংজ্ঞায়িত করতে একটি ফিচার স্টাইল ফাংশন ব্যবহার করুন। কোনও বৈশিষ্ট্যকে স্টাইল করতে, style প্রপার্টিটিকে google.maps.FeatureStyleFunction এ সেট করুন। স্টাইল ফাংশন হল সেই জায়গা যেখানে আপনি একটি ফিচার লেয়ারের পৃথক বৈশিষ্ট্যগুলিকে স্টাইল করার জন্য লজিক সংজ্ঞায়িত করেন। যখন featureLayer.style সেট করা থাকে, তখন স্টাইল ফাংশনটি প্রভাবিত ফিচার লেয়ারের প্রতিটি বৈশিষ্ট্যের উপর চালানো হয়। আপনি যখন স্টাইল প্রপার্টি সেট করেন তখন ফাংশনটি প্রয়োগ করা হয়। এটি আপডেট করতে, আপনাকে স্টাইল প্রপার্টিটি আবার সেট করতে হবে। নিম্নলিখিত উদাহরণটি একটি সহজ ফিচার স্টাইল ফাংশন দেখায়:

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

const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};

const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};

const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

function applyStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    if (
        lastClickedFeatureIds.includes(
            datasetFeature.datasetAttributes['globalid']
        )
    ) {
        return styleClicked;
    }

    if (
        lastInteractedFeatureIds.includes(
            datasetFeature.datasetAttributes['globalid']
        )
    ) {
        return styleMouseMove;
    }
    return styleDefault;
}
index.ts

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

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

const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};
const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};
const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};
function applyStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // Note, 'globalid' is an attribute in this dataset.
    if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
        return styleClicked;
    }
    if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
        return styleMouseMove;
    }
    return styleDefault;
}
index.js

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

পয়েন্ট ডেটা স্টাইলিং উদাহরণ

এই উদাহরণটি স্টাইলিং পয়েন্ট জ্যামিতি ভিত্তিক ডেটা বৈশিষ্ট্যগুলির একটি পদ্ধতি দেখায়।

ডেটাসেট সম্পর্কে

এই উদাহরণে ব্যবহৃত ডেটাসেটটি নিউ ইয়র্ক সিটির সেন্ট্রাল পার্কে কাঠবিড়ালির উপর ২০১৮ সালের জরিপের ফলাফল। CSV ডেটা ফাইলের নিম্নলিখিত অংশে, আমরা দেখতে পাচ্ছি যে x এবং y কলামগুলি ভূগোলের জন্য ব্যবহৃত হয়েছে; একটি LatLng কলাম অন্তর্ভুক্ত করা হয়েছে, তবে এই উদাহরণে এটি ব্যবহার করা হয়নি কারণ ভৌগলিক অবস্থান দুটি কলাম দ্বারা প্রতিনিধিত্ব করা আবশ্যক। কাঠবিড়ালি আদমশুমারি ডেটাসেটে কাঠবিড়ালির পর্যবেক্ষণ করা পশমের রঙ এবং আচরণ সম্পর্কিত বিভিন্ন ডেটা পয়েন্টের একটি চমৎকার বৈচিত্র্য রয়েছে (সবকিছু দেখতে অনুভূমিকভাবে স্ক্রোল করতে ভুলবেন না)।

এক্স	স	ইউনিক কাঠবিড়ালি আইডি	হেক্টর	স্থানান্তর	তারিখ	হেক্টর কাঠবিড়ালিসংখ্যা	বয়স	প্রাথমিকপশমের রঙ	হাইলাইট করুনপশমের রঙ	প্রাথমিক এবং হাইলাইট রঙের সমন্বয়	কালারনোটস	স্থান	AboveGroundSighter পরিমাপ	নির্দিষ্ট অবস্থান	দৌড়	তাড়া করা	আরোহণ	খাওয়া	খাদ্য সংগ্রহ	অন্যান্য কার্যক্রম	কুকস	কোয়াস	হাহাকার	টেইলফ্ল্যাগ	টেইল্টউইচ	পদ্ধতি	উদাসীন	রানসফ্রম	অন্যান্যমিথস্ক্রিয়া	অক্ষাংশ
-৭৩.৯৫৬১৩৪৪৯৩৭৮৬১	৪০.৭৯৪০৮২৩৮৮৪০৮৬	37F-PM-1014-03 এর কীওয়ার্ড	৩৭ফ	বিকেল	১০১৪২০১৮	৩				+					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা		পয়েন্ট (-৭৩.৯৫৬১৩৪৪৯৩৭৮৬১ ৪০.৭৯৪০৮২৩৮৮৪০৮৬)
-৭৩.৯৬৮৮৫৭৪৬৯১১০২	৪০.৭৮৩৭৮২৫২০৮৪৪৪	২১বি-এএম-১০১৯-০৪	২১খ	সকাল	১০১৯২০১৮	৪				+					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা		পয়েন্ট (-৭৩.৯৬৮৮৫৭৪৬৯১১০২ ৪০.৭৮৩৭৮২৫২০৮৪৪৪)
-৭৩.৯৭৪২৮১১৪৮৪৮৫২	৪০.৭৭৫৫৩৩৬১৯০৮৩	১১বি-পিএম-১০১৪-০৮	১১খ	বিকেল	১০১৪২০১৮	৮		ধূসর		ধূসর+		মাটির উপরে	১০		মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা		পয়েন্ট (-৭৩.৯৭৪২৮১১৪৮৪৮৫২২ ৪০.৭৭৫৫৩৩৬১৯০৮৩)
-৭৩.৯৫৯৬৪১৩৯০৩৯৪৮	৪০.৭৯০৩১২৮৮৮৯০২৯	32E-PM-1017-14 এর জন্য কীওয়ার্ড	৩২ই	বিকেল	১০১৭২০১৮	১৪	প্রাপ্তবয়স্ক	ধূসর		ধূসর+	প্রাইমারি হিসেবে কিছুই নির্বাচন করা হয়নি। হাইলাইট হিসেবে ধূসর নির্বাচন করা হয়েছে। এক্সিকিউটিভ সমন্বয় করা হয়েছে।				মিথ্যা	মিথ্যা	মিথ্যা	সত্য	সত্য		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য		পয়েন্ট (-৭৩.৯৫৯৬৪১৩৯০৩৯৪৮ ৪০.৭৯০৩১২৮৮৮৯০২৯)
-৭৩.৯৭০২৬৭৬৪৭২৬১৩	৪০.৭৭৬২১২৬৮৫৪৮৯৪	১৩ই-এএম-১০১৭-০৫	১৩ই	সকাল	১০১৭২০১৮	৫	প্রাপ্তবয়স্ক	ধূসর	দারুচিনি	ধূসর+দারুচিনি		মাটির উপরে		গাছের গুঁড়িতে	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা		পয়েন্ট (-৭৩.৯৭০২৬৭৬৪৭২৬১৩ ৪০.৭৭৬২১২৬৮৫৪৮৯৪)
-৭৩.৯৬৮৩৬১৩৫১৬২২৫	৪০.৭৭২৫৯০৮৮৪৭৪৯৯	১১এইচ-এএম-১০১০-০৩	১১ ঘন্টা	সকাল	১০১০২০১৮	৩	প্রাপ্তবয়স্ক	দারুচিনি	সাদা	দারুচিনি+সাদা					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	সত্য	মিথ্যা		পয়েন্ট (-৭৩.৯৬৮৩৬১৩৫১৬২২৫ ৪০.৭৭২৫৯০৮৮৪৭৪৯৯)
-৭৩.৯৫৪১২০১৭৮৯৭৯৫	৪০.৭৯৩১৮১১৭০১০৮২	36H-AM-1010-02 এর বিবরণ	৩৬ ঘন্টা	সকাল	১০১০২০১৮	২	প্রাপ্তবয়স্ক	ধূসর		ধূসর+	হেক্টরের ঠিক বাইরে	স্থল সমতল	মিথ্যা		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা		পয়েন্ট (-৭৩.৯৫৪১২০১৭৮৯৭৯৫ ৪০.৭৯৩১৮১১৭০১০৮২)

স্টাইল পয়েন্ট ডেটা বৈশিষ্ট্য

এই উদাহরণের কোডটি CombinationofPrimaryandHighlightColor অ্যাট্রিবিউটের উপর ভিত্তি করে প্রতিটি পয়েন্টের জন্য ফিল কালার এবং স্ট্রোক কালার স্টাইল করার সহজ পদ্ধতি গ্রহণ করে, যা প্রতিটি কাঠবিড়ালির জন্য প্রাথমিক এবং গৌণ পশমের রঙগুলিকে একত্রিত করে।

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

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}
index.ts

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

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

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break;
    }
}
index.js

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

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

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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}

async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    await google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        // Add the data legend.
        makeLegend(innerMap);
    });

    // Dataset ID for squirrel dataset.
    const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}

// Creates a legend for the map.
async function makeLegend(innerMap) {
    let colors = {
        'black': ['black'],
        'cinnamon': ['#8b0000'],
        'cinnamon + gray': ['#8b0000','gray'],
        'cinnamon + white': ['#8b0000', 'white'],
        'gray': ['gray'],
        'gray + cinnamon': ['gray', '#8b0000'],
        'gray + cinnamon + white': ['silver', '#8b0000'],
        'gray + white': ['gray', 'white'],
        'no color data': ['yellow'],
    };

    let legend = document.getElementById('legend');
    legend!.id = 'legend';
    let title = document.createElement('div');
    title.innerText = 'Fur Colors';
    title.classList.add('title');
    legend!.appendChild(title);
    let color;
    for (color in colors) {
        let wrapper = document.createElement('div');
        wrapper.id = 'container';
        let box = document.createElement('div');
        box.style.backgroundColor = colors[color][0];
        if (colors[color][1]) {
            box.style.borderColor = colors[color][1];
        } else {
            box.style.borderColor = colors[color][0];
        }
        box.classList.add('box');
        let txt = document.createElement('div');
        txt.classList.add('legend');
        txt.innerText = color;
        wrapper.appendChild(box);
        wrapper.appendChild(txt);
        legend!.appendChild(wrapper);
    }
}

initMap();
index.ts

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

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break;
    }
}
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');
    // Get the inner map.
    innerMap = mapElement.innerMap;
    await google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        // Add the data legend.
        makeLegend(innerMap);
    });
    // Dataset ID for squirrel dataset.
    const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}
// Creates a legend for the map.
async function makeLegend(innerMap) {
    let colors = {
        'black': ['black'],
        'cinnamon': ['#8b0000'],
        'cinnamon + gray': ['#8b0000', 'gray'],
        'cinnamon + white': ['#8b0000', 'white'],
        'gray': ['gray'],
        'gray + cinnamon': ['gray', '#8b0000'],
        'gray + cinnamon + white': ['silver', '#8b0000'],
        'gray + white': ['gray', 'white'],
        'no color data': ['yellow'],
    };
    let legend = document.getElementById('legend');
    legend.id = 'legend';
    let title = document.createElement('div');
    title.innerText = 'Fur Colors';
    title.classList.add('title');
    legend.appendChild(title);
    let color;
    for (color in colors) {
        let wrapper = document.createElement('div');
        wrapper.id = 'container';
        let box = document.createElement('div');
        box.style.backgroundColor = colors[color][0];
        if (colors[color][1]) {
            box.style.borderColor = colors[color][1];
        }
        else {
            box.style.borderColor = colors[color][0];
        }
        box.classList.add('box');
        let txt = document.createElement('div');
        txt.classList.add('legend');
        txt.innerText = color;
        wrapper.appendChild(box);
        wrapper.appendChild(txt);
        legend.appendChild(wrapper);
    }
}
initMap();
index.js

সিএসএস

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

#attributionLabel {
  background-color: rgba(255, 255, 255, 0.8);
  font-family: 'Roboto' ,'Arial', 'sans-serif';
  font-size: 10px;
  padding: 2px;
  margin: 2px;
}

#legend,
#dataset,
#counter {
  background-color: #e5e5e5;
  width: 15em;
  margin-top: 2em;
  margin-left: 1em;
  border-radius: 8px;
  font-family: Roboto;
  overflow: hidden;
}

#dataset select {
  border-radius: 0;
  padding: 0.1em;
  border: 1px solid black;
  width: auto;
  margin: 0.5em 1em;
}

.title {
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 0.5em;
  background-color: rgb(66, 133, 244);
  color: white;
  width: 100%;
}

.button {
  font-size: 1.2em;
  margin: 1em;
  background-color: rgb(66, 133, 244);
  color: white;
  padding: 0.5em;
  border-radius: 8px;
}

#legend #container {
  margin: 0.5em 1em;
  display: flex;
}

#legend div .box {
  display: flex;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 3px solid;
}

#legend div .legend {
  display: flex;
  padding: 0.5em;
}
style.css

এইচটিএমএল

<html>
    <head>
        <title>Style a point data feature</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"});</script>
    </head>
    <body>
        <gmp-map
            map-id="5cd2c9ca1cf05670"
            center="40.780101, -73.967780"
            zoom="17"
            map-type-control="false"
            street-view-control="false"
            fullscreen-control="false">
            <div id="legend" slot="control-inline-start-block-start"></div>
            <div id="attributionLabel" slot="control-inline-start-block-end">
                Data source: NYC Open Data
            </div>
        </gmp-map>
    </body>
</html>
index.html

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

জেএসফিডল.নেট

বহুভুজ ডেটা স্টাইলিং উদাহরণ

এই উদাহরণটি বহুভুজ জ্যামিতি ভিত্তিক ডেটা বৈশিষ্ট্যগুলি স্টাইল করার একটি পদ্ধতি দেখায়।

ডেটাসেট সম্পর্কে

এই উদাহরণে ব্যবহৃত ডেটাসেটটি নিউ ইয়র্ক সিটির পার্কগুলিকে চিত্রিত করে। ডেটাসেট GeoJSON ফাইল থেকে নিম্নলিখিত অংশটি একটি প্রতিনিধিত্বমূলক বৈশিষ্ট্য এন্ট্রি দেখায়।

{
  "type": "Feature",
  "properties": {
    "jurisdiction": "DPR",
    "mapped": "False",
    "zipcode": "11356",
    "acres": "0.05",
    "location": "College Pl., College Pt. Blvd., bet. 11 Ave. and 12 Ave.",
    "nys_assembly": "27",
    "councildistrict": "19",
    "url": "http://www.nycgovparks.org/parks/Q042/",
    "typecategory": "Triangle/Plaza",
    "us_congress": "14",
    "eapply": "Poppenhusen Park",
    "parentid": "Q-07",
    "gispropnum": "Q042",
    "retired": "false",
    "communityboard": "407",
    "objectid": "6248",
    "globalid": "F4810079-CBB9-4BE7-BBFA-B3C0C35D5DE5",
    "name311": "Poppenhusen Park",
    "department": "Q-07",
    "pip_ratable": "true",
    "subcategory": "Sitting Area/Triangle/Mall",
    "precinct": "109",
    "permit": "true",
    "acquisitiondate": null,
    "omppropid": "Q042",
    "gisobjid": "100000301",
    "signname": "Poppenhusen Park",
    "address": null,
    "permitparent": "Q-07",
    "class": "PARK",
    "nys_senate": "11",
    "permitdistrict": "Q-07",
    "borough": "Q",
    "waterfront": "false"
  },
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      [
        [
          [
            -73.84575702371716,
            40.78796240884273
          ],
          [
            -73.84593393292693,
            40.78796857347548
          ],
          [
            -73.84577256469657,
            40.787651355629556
          ],
          [
            -73.84575702371716,
            40.78796240884273
          ]
        ]
      ]
    ]
  }
},

স্টাইল বহুভুজ ডেটা বৈশিষ্ট্য

এই উদাহরণের কোডটি "অবিকাশিত" বা "পার্কওয়ে" typecategory সাথে সম্পর্কিত ডেটা বৈশিষ্ট্যগুলিতে বিশেষ রঙ প্রয়োগ করে এবং অন্যান্য সমস্ত বৈশিষ্ট্যকে সবুজ রঙ করে।

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

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes['typecategory'];

    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
index.ts

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

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

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes['typecategory'];
    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
index.js

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

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

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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes['typecategory'];

    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}

async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}

initMap();
index.ts

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

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes['typecategory'];
    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}
initMap();
index.js

সিএসএস

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

#attribution {
 background-color: rgba(255, 255, 255, 0.7);
 font-family: "Roboto", "Arial", "sans-serif";
 font-size: 10px;
 padding: 2px;
 margin: 2px;
}
style.css

এইচটিএমএল

<html>
  <head>
    <title>Style a polygon data feature with more detail</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"});</script>
  </head>
  <body>
        <gmp-map center="40.580732, -74.152826" zoom="14" map-id="5cd2c9ca1cf05670">
            <div id="attribution" slot="control-block-end-inline-start">Data source: NYC Open Data</div>
        </gmp-map>
  </body>
</html>
index.html

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

জেএসফিডল.নেট

পলিলাইন ডেটা স্টাইলিং উদাহরণ

এই উদাহরণটি পলিলাইন জ্যামিতি ভিত্তিক ডেটা বৈশিষ্ট্যগুলি স্টাইল করার একটি পদ্ধতি দেখায়।

ডেটাসেট সম্পর্কে

এই উদাহরণে ব্যবহৃত ডেটাসেটটি সিয়াটল এলাকার সেতুগুলি দেখায়। ডেটাসেট GeoJSON ফাইল থেকে নিম্নলিখিত অংশটি একটি প্রতিনিধিত্বমূলক বৈশিষ্ট্য এন্ট্রি দেখায়।

{
  "type": "Feature",
  "properties": {
      "OBJECTID": 1,
      "COMPTYPE": 66,
      "COMPKEY": 515774,
      "HANSEGKEY": 489781,
      "UNITID": "BRG-935",
      "UNITTYPE": " ",
      "BRGUNITID": "BRG-935",
      "UNITDESC_BRG": "YALE AVE BR REV LANE OC                                                                                                                                                                                                                                        ",
      "UNITDESC_SEG": "HOWELL ST ON RP BETWEEN HOWELL ST AND I5 SB                                                                                                                                                                                                                    ",
      "INSTDATE": null,
      "EXPDATE": null,
      "STATUS": " ",
      "STATUSDT": null,
      "CONDITION": " ",
      "CONDDT": null,
      "OWN": " ",
      "LSTVERIFY": null,
      "MAINTBY": " ",
      "ADDBY": "GARCIAA",
      "ADDDTTM": "2010-01-21T00:00:00Z",
      "MODBY": null,
      "MODDTTM": null,
      "BR_NBR": 935,
      "BR_CODE": " 935",
      "BR_TYPE": "ST",
      "BR_NAME": "YALE AVE BR REV LANE OC",
      "BR_FACILITIES": "YALE AVE-SR 5 ON RAMP",
      "BR_FEATURES": "SR 5 REV LANE",
      "BR_RATING": 0,
      "BR_INSET": 1,
      "BR_GEO": "DT",
      "BR_OWNER": "DOT",
      "BR_OWNER_NAME": "State of Washington",
      "GEOBASID": 0,
      "XGEOBASID": 0,
      "GISSEGKEY": 489781,
      "EARTHQUAKE_RESPONSE_TEAM": " ",
      "SHAPE_Length": 220.11891836147655
  },
  "geometry": {
      "type": "LineString",
      "coordinates": [
          [
              -122.329201929090928,
              47.616910448708538
          ],
          [
              -122.329206483407461,
              47.616976719821004
          ],
          [
              -122.32921802149356,
              47.617042137515213
          ],
          [
              -122.329236413912909,
              47.617105967923777
          ],
          [
              -122.329261454336034,
              47.617167494985758
          ],
          [
              -122.329292861855023,
              47.617226028479571
          ],
          [
              -122.329330284134699,
              47.617280911766009
          ],
          [
              -122.329373301365223,
              47.617331529154569
          ],
          [
              -122.329421430971635,
              47.617377312810319
          ],
          [
              -122.329474133027375,
              47.617417749124023
          ],
          [
              -122.32953081631139,
              47.617452384473893
          ]
      ]
  }
},

স্টাইল পলিলাইন ডেটা বৈশিষ্ট্য

নিচের স্নিপেটটি সমস্ত ডেটা বৈশিষ্ট্যের জন্য সরাসরি একই স্টাইল প্রয়োগ করে। যেহেতু কোনও যুক্তির প্রয়োজন নেই, তাই এই ক্ষেত্রে কোনও বৈশিষ্ট্য শৈলী ফাংশন ব্যবহার করা হয় না।

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

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
index.ts

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

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

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
index.js

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

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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Dataset ID for Seattle Bridges
    const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);

    // Apply style to all features.
    datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
}

initMap();
index.ts

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

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Dataset ID for Seattle Bridges
    const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    // Apply style to all features.
    datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
}
initMap();
index.js

সিএসএস

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

#attribution {
 background-color: rgba(255, 255, 255, 0.7);
 font-family: "Roboto", "Arial", "sans-serif";
 font-size: 10px;
 padding: 2px;
 margin: 2px;
}
style.css

এইচটিএমএল

<html>
    <head>
        <title>Style a polyline data feature</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"});</script>
    </head>
    <body>
        <gmp-map
            center="47.59, -122.31"
            zoom="14"
            map-id="5cd2c9ca1cf05670"
            map-type-control="false">
            <div id="attribution" slot="control-block-end-inline-start">
                Data source: NYC Open Data
            </div>
        </gmp-map>
    </body>
</html>
index.html

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

জেএসফিডল.নেট