סקירה כללית של הסמנים

ניתן להשתמש בסמנים כדי להציג מיקומים בודדים במפה. המדריך הזה מראה איך להשתמש בסמנים מתקדמים. בעזרת סמנים מתקדמים אפשר ליצור ולהתאים אישית סמנים שמניבים ביצועים טובים, וליצור סמנים נגישים שמגיבים לאירועים של קליקים ב-DOM ולקלט מהמקלדת. כדי לבצע התאמה אישית מעמיקה יותר, תוכלו להשתמש ב-HTML וב-CSS מותאמים אישית באמצעות סמנים מתקדמים, כולל היכולת ליצור סמנים מותאמים אישית לחלוטין. באפליקציות תלת-ממד אפשר לקבוע את הגובה שבו הסמן יופיע. סמנים מתקדמים נתמכים גם במפות רסטר וגם במפות וקטוריות (אם כי חלק מהתכונות אינן זמינות במפות רסטר). כדי להשתמש בסמנים מתקדמים, נדרש מזהה מפה (אפשר להשתמש ב-DEMO_MAP_ID).

תחילת העבודה עם סמנים מתקדמים

התאמה אישית של הצבע, הסולם ותמונת הסמל

ניתן להתאים אישית את צבע הרקע, הגליף וצבע הגבול של ברירת המחדל, ולשנות את גודל הסמן.

החלפת סמל הסמן שמוגדר כברירת מחדל בתמונה בהתאמה אישית בפורמט SVG או PNG.

יצירת סמנים מותאמים אישית של HTML

השתמשו ב-HTML וב-CSS מותאמים אישית כדי ליצור סמנים אינטראקטיביים ייחודיים מבחינה חזותית וליצור אנימציות.

לגרום לסמנים להגיב לאירועי קליק ומקלדת

כדי לגרום לסמן להגיב ללחיצות ולאירועים במקלדת, מוסיפים רכיב מעקב אירועים מסוג click.

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  marker.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

הגדרת הגובה של הסמן והתנהגות התנגשות

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

השלב הבא

• תחילת העבודה עם סמנים מתקדמים