از نشانگرها برای نمایش مکان های منفرد روی نقشه استفاده کنید. این صفحه نشان می دهد که چگونه می توان یک نشانگر را به صورت برنامه ریزی شده و با استفاده از HTML به نقشه اضافه کرد.
کتابخانه نشانگر پیشرفته را بارگیری کنید
برای افزودن یک نشانگر پیشرفته به نقشه، کد نقشه شما باید کتابخانه marker
بارگیری کند. چه برنامه شما نشانگرها را به صورت برنامه نویسی یا با استفاده از HTML بارگیری کند، این امر اعمال می شود. برای انجام این کار، ابتدا برنامه شما باید Maps JavaScript API را بارگیری کند .
روشی که برای بارگیری کتابخانه ها استفاده می کنید بستگی به نحوه بارگیری صفحه وب شما Maps JavaScript API دارد.
اگر صفحه وب شما از بارگذاری اسکریپت پویا استفاده میکند، کتابخانه نشانگرها را اضافه کنید و
AdvancedMarkerElement
(و به صورت اختیاریPinElement
) را در زمان اجرا وارد کنید، همانطور که در اینجا نشان داده شده است.const { AdvancedMarkerElement } = 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>
با استفاده از HTML (بتا) یک نشانگر اضافه کنید
برای افزودن یک نشانگر پیشرفته با استفاده از HTML، یک عنصر فرزند gmp-advanced-marker
به عنصر gmp-map
اضافه کنید. قطعه زیر اضافه کردن نشانگرها به یک صفحه وب را نشان می دهد:
<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>
کد نمونه کامل
TypeScript
// This example adds a map with markers, using web components. async function initMap(): Promise<void> { console.log('Maps JavaScript API loaded.'); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
جاوا اسکریپت
// This example adds a map with markers, using web components. async function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } gmp-map { height: 400px; }
HTML
<html> <head> <title>Add a Map with Markers using HTML</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <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> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta" defer ></script> </body> </html>
Sample را امتحان کنید
یک نشانگر به صورت برنامه ریزی شده اضافه کنید
برای افزودن یک نشانگر پیشرفته به نقشه به صورت برنامهریزی، یک AdvancedMarkerElement
جدید ایجاد کنید، با عبور از LatLng
یا LatLngAltitude
، و یک مرجع به نقشه پایه، همانطور که در این مثال نشان داده شده است:
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
});
کد نمونه کامل
TypeScript
async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: '4504f8b37365c3d0', }); const marker = new AdvancedMarkerElement({ map, position: { lat: 37.4239163, lng: -122.0947209 }, }); } initMap();
جاوا اسکریپت
async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const map = new Map(document.getElementById("map"), { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: "4504f8b37365c3d0", }); const marker = new AdvancedMarkerElement({ map, position: { lat: 37.4239163, lng: -122.0947209 }, }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Default Advanced Marker</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Sample را امتحان کنید
برای حذف نشانگر از نقشه، markerView.map
یا position
روی null
تنظیم کنید.