אפשר להשתמש בסמנים כדי להציג מיקומים בודדים במפה. בדף הזה מוסבר איך להוסיף סמן למפה באופן פרוגרמטי ובעזרת רכיבי HTML בהתאמה אישית.
טעינה של ספריית הסמנים המתקדמת
כדי להוסיף סמן מתקדם למפה, קוד המפה צריך לטעון את הספרייה marker, שמספקת את המחלקות AdvancedMarkerElement ו-PinElement. הכלל הזה חל גם אם האפליקציה טוענת את הסמנים באופן פרוגרמטי וגם אם היא טוענת אותם באמצעות HTML. כדי לעשות זאת, קודם צריך לטעון את Maps JavaScript API באפליקציה.
השיטה שבה משתמשים לטעינת ספריות תלויה באופן שבו דף האינטרנט טוען את Maps JavaScript API.
אם דף האינטרנט משתמש בטעינה דינמית של סקריפטים, צריך להוסיף את ספריית הסמנים ולייבא את
AdvancedMarkerElement(ואופציונלית אתPinElement) בזמן הריצה, כמו שמוצג כאן.const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
אם דף האינטרנט שלכם משתמש בתג לטעינת סקריפט ישירה, מוסיפים
libraries=markerלסקריפט הטעינה, כמו שמוצג בקטע הקוד הבא. הפעולה הזו תגרום לייבוא שלAdvancedMarkerElementוגם שלPinElement.<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>הצגת קוד המקור המלא לדוגמה
בדוגמה הזו מוצג תהליך יצירת מפה עם סמנים באמצעות HTML.
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;
JavaScript
// 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>
<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>לניסיון
הוספת סמן באופן פרוגרמטי
כדי להוסיף סמן מתקדם למפה באופן פרוגרמטי, יוצרים AdvancedMarkerElement חדש, מעבירים LatLng או LatLngAltitude והפניה למפת הבסיס, כמו בדוגמה הזו:
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
});
כדי להסיר סמן מהמפה, מגדירים את markerView.map או את position לערך null.
הצגת קוד המקור המלא לדוגמה
בדוגמה הזו מוסבר איך להוסיף סמן למפה.
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();
JavaScript
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>
<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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>