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

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

ניתן להשתמש בסמנים כדי להציג מיקומים בודדים במפה. דף זה מסביר כיצד להוסיף סמן למפה באופן פרוגרמטי ועל ידי שימוש ב-HTML.

טעינת ספריית הסמנים המתקדמת

כדי להוסיף סמן מתקדם למפה, קוד המפה שלך צריך לטעון את הספרייה marker. הדבר נכון בין אם האפליקציה טוענת סמנים באופן פרוגרמטי או באמצעות HTML. כדי לעשות זאת, תחילה האפליקציה שלכם צריכה לטעון את ה-API JavaScript של מפות 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>
index.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>
    <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 callback 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&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.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();
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>
    <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>
index.html

רוצה לנסות את הדוגמה

כדי להסיר סמן מהמפה, צריך להגדיר את markerView.map או את position לערך null.

השלבים הבאים