אפשר להשתמש בסמנים כדי להציג מיקומים בודדים במפה. בדף הזה נסביר איך להוסיף סמן למפה באופן פרוגרמטי ובאמצעות שימוש ב-HTML.
טעינה של ספריית הסמנים המתקדמת
כדי להוסיף סמן מתקדם למפה, קוד המפה חייב לטעון את הספרייה marker. הדרישה הזו רלוונטית בין אם האפליקציה טוענת סמנים באופן פרוגרמטי או באמצעות HTML. כדי לעשות את זה, קודם צריך לטעון את ממשק JavaScript API של מפות Google על האפליקציה.
השיטה לטעינת ספריות תלויה באופן שבו דף האינטרנט טוען את ממשק ה-API של JavaScript של מפות Google.
אם בדף האינטרנט שלכם נעשה שימוש בטעינת סקריפט דינמית, מוסיפים את ספריית הסמנים ומייבאים את
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>
dev
הוספת סמן באמצעות 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>
<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>
כדאי לנסות דוגמה
הוספת סמן באופן פרוגרמטי
כדי להוסיף סמן מתקדם למפה באופן פרוגרמטי, יוצרים 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>
<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>
כדאי לנסות דוגמה
כדי להסיר סמן מהמפה, מגדירים את markerView.map או את position לערך null.