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

אפשר להשתמש בסמנים כדי להציג מיקומים בודדים במפה. המדריך הזה מראה איך להשתמש בסמנים מתקדמים. בעזרת סמנים מתקדמים אפשר ליצור ולהתאים אישית סמנים בעלי ביצועים גבוהים, וליצור סמנים נגישים שמגיבים לאירועים של קליקים ב-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.
    // ...
  });
}

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

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

השלב הבא

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