סקירה כללית

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

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

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

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

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

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

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

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

אפשר לגרום לסמן להגיב לקליקים ולאירועי מקלדת על ידי הוספת event listener של 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.
    // ...
  });
}

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

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

השלב הבא

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