نمای کلی نشانگرها
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
پلتفرم را انتخاب کنید: Android iOS JavaScript از نشانگرها برای نمایش مکان های منفرد روی نقشه استفاده کنید. این راهنما نحوه استفاده از نشانگرهای پیشرفته را به شما نشان می دهد. با نشانگرهای پیشرفته می توانید نشانگرهای بسیار کارآمد را ایجاد و سفارشی کنید، و نشانگرهایی در دسترس بسازید که به رویدادهای کلیک DOM و ورودی صفحه کلید پاسخ می دهند. برای سفارشیسازی عمیقتر، نشانگرهای پیشرفته از استفاده از HTML و CSS سفارشی، از جمله توانایی ایجاد نشانگرهای کاملاً سفارشی پشتیبانی میکنند. برای برنامه های سه بعدی می توانید ارتفاعی را که در آن نشانگر ظاهر می شود کنترل کنید. نشانگرهای پیشرفته هم در نقشه های شطرنجی و هم بردار پشتیبانی می شوند (اگرچه برخی از ویژگی ها در نقشه های شطرنجی در دسترس نیستند). شناسه نقشه برای استفاده از نشانگرهای پیشرفته مورد نیاز است ( DEMO_MAP_ID
را می توان استفاده کرد).
با نشانگرهای پیشرفته شروع کنید
رنگ، مقیاس و تصویر نماد را سفارشی کنید
پس زمینه، علامت و رنگ حاشیه نشانگر پیش فرض را سفارشی کنید و اندازه نشانگر را تنظیم کنید.

نماد نشانگر پیش فرض را با یک تصویر SVG یا PNG سفارشی جایگزین کنید.

نشانگرهای HTML سفارشی ایجاد کنید
از HTML و CSS سفارشی برای ایجاد نشانگرهای تعاملی متمایز بصری و ایجاد انیمیشن استفاده کنید.

نشانگرها را به رویدادهای کلیک و صفحه کلید پاسخ دهید
با افزودن شنونده رویداد click
، نشانگری را ایجاد کنید که به کلیکها و رویدادهای صفحهکلید پاسخ دهد.
function initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.4239163, lng: -122.0947209},
zoom: 17,
mapId: 'DEMO_MAP_ID',
});
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
marker.addListener('click', ({domEvent, latLng}) => {
const {target} = domEvent;
// Handle the click event.
// ...
});
}
ارتفاع نشانگر و رفتار برخورد را تنظیم کنید
ارتفاع یک نشانگر را تنظیم کنید تا با عناصر نقشه سه بعدی به درستی ظاهر شود و مشخص کنید نشانگر در هنگام برخورد با نشانگر یا برچسب نقشه دیگر چگونه باید رفتار کند. ارتفاع نشانگر فقط در نقشه های برداری پشتیبانی می شود.

مرحله بعدی
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2025-08-15 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-08-15 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eAdvanced markers offer highly performant and customizable options for displaying single locations on Google Maps, including custom HTML and CSS for unique designs.\u003c/p\u003e\n"],["\u003cp\u003eThey are accessible, responding to DOM click events and keyboard input for enhanced user interaction.\u003c/p\u003e\n"],["\u003cp\u003eCustomization options include changing color, scale, icon image, and creating custom HTML markers with interactive elements and animations.\u003c/p\u003e\n"],["\u003cp\u003eAltitude control is available for 3D applications, enabling precise marker placement in three-dimensional spaces, although this feature is limited to vector maps.\u003c/p\u003e\n"],["\u003cp\u003eAdvanced markers are compatible with both raster and vector maps, requiring a map ID for implementation, and offer improved performance compared to legacy markers.\u003c/p\u003e\n"]]],["Advanced markers allow customization of map markers, including color, scale, and icons (SVG/PNG). Users can employ custom HTML and CSS for unique designs and animations. Markers can be made interactive via `click` event listeners, handling user clicks and keyboard input. Altitude and collision behavior can be defined for 3D maps. A map ID, like `DEMO_MAP_ID`, is needed, and these advanced markers are available on Android, iOS, and JavaScript platforms, supporting both raster and vector maps.\n"],null,["Select platform: [Android](/maps/documentation/android-sdk/advanced-markers/overview \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/advanced-markers/overview \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/advanced-markers/overview \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nUse markers to display single locations on a map. This guide shows you how to\nuse advanced markers. With\nadvanced markers you can create and customize highly\nperformant markers, and make accessible markers that respond to DOM click events\nand keyboard input. For even deeper customization,\nadvanced markers supports the use of custom HTML and CSS,\nincluding the ability to create completely custom markers. For 3D applications\nyou can control the altitude at which a marker appears.\nAdvanced markers are supported on both raster and vector maps (though some features are not available on raster maps).\nA map ID is required to use Advanced Markers (the `DEMO_MAP_ID` can be used).\n| **Tip:** If your map uses [legacy markers](/maps/documentation/javascript/markers), consider [migrating to advanced markers](/maps/documentation/javascript/advanced-markers/migration).\n\n[Get started with advanced markers](/maps/documentation/javascript/advanced-markers/start)\n\nCustomize color, scale, and icon image\n\nCustomize the default marker's background, glyph, and border\ncolor, and adjust marker size.\n\nReplace the default marker icon with a custom SVG or PNG image.\n\nCreate custom HTML markers\n\nUse custom HTML and CSS to create visually distinctive\ninteractive markers, and create animations.\n\nMake markers respond to click and keyboard events\n\nMake a marker respond to clicks and keyboard events by adding a\n`click` event listener. \n\n```javascript\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById('map'), {\n center: {lat: 37.4239163, lng: -122.0947209},\n zoom: 17,\n mapId: 'DEMO_MAP_ID',\n });\n\n const marker = new google.maps.marker.AdvancedMarkerElement({\n map,\n position: {lat: 37.4239163, lng: -122.0947209},\n });\n\n marker.addListener('click', ({domEvent, latLng}) =\u003e {\n const {target} = domEvent;\n // Handle the click event.\n // ...\n });\n}\n```\n\nSet marker altitude and collision behavior\n\nSet the altitude for a marker to make it appear correctly with\n3D map elements, and specify how a marker should behave when it collides with\nanother marker or map label. Marker altitude is only supported on vector maps.\n\nNext step\n\n- [Get started with advanced markers](/maps/documentation/javascript/advanced-markers/start)"]]