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

בחירת פלטפורמה: 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

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

השלבים הבאים