הוספת סמן למפה

בחירת פלטפורמה: Android iOS JavaScript

ניתן להשתמש בסמנים כדי להציג מיקומים בודדים במפה. בדף הזה מוסבר איך להוסיף סימון למפה באופן פרוגרמטי, וגם באמצעות 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>
index.html

הצגת קוד המקור המלא של הדוגמה

בדוגמה הזו מוצגת יצירת מפה עם סמנים באמצעות 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;
index.ts

JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = initMap;
index.js

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;
}

style.css

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>
index.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();
index.ts

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();
index.js

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;
}

style.css

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>
index.html

ניסיון של דוגמה

השלבים הבאים