উন্নত মার্কারগুলিতে স্থানান্তর করুন৷
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
21শে ফেব্রুয়ারী, 2024 (v3.56) হিসাবে, google.maps.Marker বাতিল করা হয়েছে৷ আমরা আপনাকে নতুন google.maps.marker.AdvancedMarkerElement ক্লাসে রূপান্তর করতে উত্সাহিত করি৷ উন্নত মার্কারগুলি লিগ্যাসি google.maps.Marker ক্লাসে উল্লেখযোগ্য উন্নতি প্রদান করে৷
এই অবচয় সম্পর্কে আরও জানুন
একটি লিগ্যাসি মার্কারকে একটি উন্নত মার্কার হতে আপডেট করতে, নিম্নলিখিত পদক্ষেপগুলি নিন:
- মার্কার লাইব্রেরি আমদানি করতে কোড যোগ করুন। উল্লেখ্য যে মার্কারগুলির পূর্ববর্তী সংস্করণে (
google.maps.Marker ) এই প্রয়োজনীয়তা নেই৷ -
google.maps.Marker google.maps.marker.AdvancedMarkerElement এ পরিবর্তন করুন - আপনার মানচিত্র প্রারম্ভিক কোড একটি মানচিত্র ID যোগ করুন. উদাহরণ স্বরূপ
mapId: 'DEMO_MAP_ID' পরীক্ষার উদ্দেশ্যে যদি আপনার কাছে ইতিমধ্যেই একটি মানচিত্র ID না থাকে।
অ্যাডভান্সড মার্কার লাইব্রেরি যোগ করুন
লাইব্রেরি লোড করার জন্য আপনি যে পদ্ধতি ব্যবহার করেন তা নির্ভর করে আপনার ওয়েব পৃষ্ঠা কীভাবে মানচিত্র জাভাস্ক্রিপ্ট API লোড করে।
যদি আপনার ওয়েব পৃষ্ঠা ডায়নামিক স্ক্রিপ্ট লোডিং ব্যবহার করে, তাহলে মার্কার লাইব্রেরি যোগ করুন এবং রানটাইমে AdvancedMarkerElement (এবং ঐচ্ছিকভাবে PinElement ) আমদানি করুন, যেমনটি এখানে দেখানো হয়েছে।
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); আপনার ওয়েব পেজ যদি লিগ্যাসি ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করে, তাহলে লোডিং স্ক্রিপ্টে libraries=marker যোগ করুন, যেমনটি নিচের স্নিপেটে দেখানো হয়েছে।
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>
Maps JavaScript API লোড করার বিষয়ে আরও জানুন
উদাহরণ
নিম্নলিখিত কোড উদাহরণগুলি একটি উত্তরাধিকার মার্কার যোগ করার জন্য কোড দেখায়, উন্নত মার্কার ব্যবহার করে একই উদাহরণের জন্য কোড অনুসরণ করে:
মাইগ্রেশনের আগে
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: position,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
map: map,
position: position,
title: 'Uluru',
}); মাইগ্রেশনের পর
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});
// The advanced marker, positioned at Uluru
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: position,
title: 'Uluru',
}); উন্নত মার্কার বৈশিষ্ট্য অন্বেষণ
উন্নত মার্কারগুলি এমনভাবে কাস্টমাইজ করা যেতে পারে যা আগে সম্ভব ছিল না। এখন আপনি মার্কারগুলির আকার (স্কেল) সামঞ্জস্য করতে পারেন এবং পটভূমি, সীমানা এবং গ্লিফের রঙ পরিবর্তন করতে পারেন। কাস্টম গ্রাফিক ছবিগুলির সাথে কাজ করা সহজ, এবং এখন HTML এবং CSS ব্যবহার করে কাস্টম মার্কার রচনা করা সম্ভব। উন্নত মার্কারগুলির সাথে আপনি যা করতে পারেন সে সম্পর্কে আরও জানুন:
অন্য কিছু উল্লেখ না করা থাকলে, এই পৃষ্ঠার কন্টেন্ট Creative Commons Attribution 4.0 License-এর অধীনে এবং কোডের নমুনাগুলি Apache 2.0 License-এর অধীনে লাইসেন্স প্রাপ্ত। আরও জানতে, Google Developers সাইট নীতি দেখুন। Java হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2025-08-15 UTC-তে শেষবার আপডেট করা হয়েছে।
[null,null,["2025-08-15 UTC-তে শেষবার আপডেট করা হয়েছে।"],[[["\u003cp\u003e\u003ccode\u003egoogle.maps.Marker\u003c/code\u003e is deprecated as of February 21st, 2024 (v3.56) and developers should transition to \u003ccode\u003egoogle.maps.marker.AdvancedMarkerElement\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eAdvanced markers require adding the marker library, changing the class name, and including a map ID during map initialization.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can customize advanced markers with features like adjustable size, custom colors, graphic images, and HTML/CSS composition.\u003c/p\u003e\n"],["\u003cp\u003eSeveral resources are available to learn more about advanced marker features such as basic customization, graphic markers, HTML/CSS markers, collision behavior, and accessibility.\u003c/p\u003e\n"]]],["Google's `google.maps.Marker` is deprecated as of February 21st, 2024, in favor of `google.maps.marker.AdvancedMarkerElement`. To migrate, import the marker library, replace `google.maps.Marker` with the new class, and add a map ID to map initialization code (e.g., `mapId: 'DEMO_MAP_ID'`). Load the library dynamically with `google.maps.importLibrary(\"marker\")` or add `libraries=marker` to the script tag. Advanced markers offer enhanced customization, including size, color, and HTML/CSS-based designs.\n"],null,["As of February 21st, 2024 (v3.56), google.maps.Marker is deprecated. We\nencourage you to transition to the new `google.maps.marker.AdvancedMarkerElement`\nclass. Advanced markers provide substantial improvements over the legacy\n`google.maps.Marker` class.\n\n[Learn more about this deprecation](/maps/deprecations#googlemapsmarker_in_the_deprecated_as_of_february_2023)\n\nTo update a legacy marker to be an advanced marker, take the following steps:\n\n1. Add code to import the marker library. Note that the previous version of markers (`google.maps.Marker`) does not have this requirement.\n2. Change `google.maps.Marker` to `google.maps.marker.AdvancedMarkerElement`\n3. Add a map ID to your map initialization code. For example `mapId: 'DEMO_MAP_ID'` for testing purposes if you don't have a map ID already.\n\nAdd the Advanced Marker library\n\nThe method you use for loading libraries depends on how your web page loads the\nMaps JavaScript API.\n\n- If your web page uses dynamic script loading, add the markers library and\n import `AdvancedMarkerElement` (and optionally `PinElement`) at runtime, as\n shown here.\n\n ```javascript\n const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(\"marker\");\n ```\n- If your web page uses the legacy direct script loading tag, add\n `libraries=marker` to the loading script, as shown in the following snippet.\n\n ```html\n \u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker\"\n defer\n \u003e\u003c/script\u003e\n ```\n\n[Learn more about loading the Maps JavaScript API](/maps/documentation/javascript/load-maps-js-api)\n\nExamples\n\nThe following code examples show code for adding a legacy marker, followed by\nthe code for the same example using advanced markers:\n\nBefore migration \n\n```javascript\n// The location of Uluru\nconst position = { lat: -25.344, lng: 131.031 };\n\nconst map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 4,\n center: position,\n});\n\n// The marker, positioned at Uluru\nconst marker = new google.maps.Marker({\n map: map,\n position: position,\n title: 'Uluru',\n});\n```\n\nAfter migration \n\n```javascript\n // The location of Uluru\n const position = { lat: -25.344, lng: 131.031 };\n\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 4,\n center: position,\n mapId: \"DEMO_MAP_ID\", // Map ID is required for advanced markers.\n });\n\n // The advanced marker, positioned at Uluru\n const marker = new google.maps.marker.AdvancedMarkerElement({\n map,\n position: position,\n title: 'Uluru',\n });\n```\n\nExplore advanced marker features\n\nAdvanced markers can be customized in ways that were not possible before.\nNow you can adjust the size (scale) of markers, and change the colors of the\nbackground, border, and glyph. Custom graphic images are simpler to work with,\nand it is now possible to compose custom markers using HTML and CSS. Learn more\nabout everything you can do with advanced markers:\n\n- [Basic marker customization](/maps/documentation/javascript/advanced-markers/basic-customization)\n- [Create markers with graphics](/maps/documentation/javascript/advanced-markers/graphic-markers)\n- [Create markers with HTML and CSS](/maps/documentation/javascript/advanced-markers/html-markers)\n- [Control collision behavior, altitude, and visibility](/maps/documentation/javascript/advanced-markers/collision-behavior)\n- [Make markers clickable and accessible](/maps/documentation/javascript/advanced-markers/accessible-markers)"]]
