ניתן להשתמש בסמנים כדי להציג מיקומים בודדים במפה. בדף הזה מוסבר איך להוסיף לסמן מפה באופן פרוגרמטי ובאמצעות HTML.
טעינה של ספריית הסמנים המתקדמת
כדי להוסיף סמן מתקדם למפה, קוד המפה שלך חייב לטעון את
הספרייה marker
. ההגדרה הזו חלה אם האפליקציה טוענת סמנים באופן פרוגרמטי
או באמצעות HTML. כדי לעשות את זה, האפליקציה צריכה קודם
טוענים את Maps JavaScript API.
השיטה שבה משתמשים לטעינת ספריות תלויה באופן שבו דף האינטרנט טוען את API של מפות Google ל-JavaScript.
אם דף האינטרנט משתמש בטעינת סקריפט דינמית, צריך להוסיף את ספריית הסמנים לייבא את
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;
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 },
});
קוד דוגמה מלא
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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
כדאי לנסות דוגמה
כדי להסיר סמן מהמפה, צריך להגדיר את markerView.map
או את position
לערך
null
.