רכיבי אינטרנט ב-JavaScript JavaScript API (תצוגה מקדימה)

רכיבי Web Component הם תקן פופולרי של W3C, שמקיף HTML, CSS ו-JS ברכיבי HTML מותאמים אישית או שניתנים לשימוש חוזר. הרכיבים האלה לשימוש חוזר יכולים לנוע בין רכיבי פונקציונליות אטומיים, כמו הצגת דירוג כוכבים, ללוגיקה עסקית מורכבת יותר. במדריך הזה מתוארים רכיבי האינטרנט שזמינים בממשק ה-API של JavaScript של מפות Google.

למידע נוסף על התקן עצמו, ראו רכיבי אינטרנט.

קהל

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

הצגת מפה

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

מפה של אזור סן חוזה

HTML

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

בדוגמה הזו יש כמה דברים שכדאי לשים לב אליהם:

  1. ה-API של JavaScript של מפות Google נקרא באופן אסינכרוני. פונקציית הקריאה החוזרת משמשת כדי לדעת מתי ה-API נטען.
  2. הצגת המפה מוגדרת באמצעות הרכיב המותאם אישית <gmp-map>.
  3. מאפייני המפה מוגדרים על ידי ציון המאפיינים ברכיב המותאם אישית <gmp-map>.
  4. אפשר להחיל את העיצוב בתוך השורה על רכיבים מותאמים אישית או להצהיר על המדיניות בקובץ CSS נפרד.

עיצוב המפה הבסיסית

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

הוספת סמנים למפה

כפי שניתן לקנן תגי HTML מובנים כדי ליצור היררכיות תוכן מורכבות, אפשר גם לקנן <gmp-advanced-marker> בתוך רכיב כדי להציג סמן מפה אחד או יותר.

מפה עם סמנים

HTML

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
      <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>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

הוספנו כאן שני רכיבי <gmp-advanced-marker> לרכיב המותאם אישית <gmp-map>. הטקסט של title כולל טקסט נוסף ותווית נגישות שמעבירים את העכבר מעל לרכיב שצוין.

אירועי JavaScript

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

אירוע של לחיצה בסמן

HTML

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    function initMap() {
      console.log('Maps JavaScript API loaded.');

      const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");
      for (const advancedMarker of advancedMarkers) {
        customElements.whenDefined(advancedMarker.localName).then(async () => {
          advancedMarker.addEventListener('gmp-click', async () => {
            const {InfoWindow} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </script>
</head>
<body>

<gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
  <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>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

בדוגמה הזו, initMap מייצג את פונקציית הקריאה החוזרת (callback) הנדרשת לאחר טעינת ה-API של JavaScript במפות Google במלואה. הקוד מבסס את המאזינים לכל סמן, ומציג חלון מידע כשלוחצים על כל סמן.

מה השלב הבא?