הוספת מפת Google עם סמנים באמצעות HTML

מבוא

במדריך הזה תלמדו איך להוסיף מפה של Google עם סמן לדף אינטרנט באמצעות HTML. זו המפה שתיצרו בעזרת המדריך הזה. מיקומים של שני סמנים: אחד ב-Mountain View,‏ CA, והשני בסיאטל,‏ WA.

שנתחיל?

אלה השלבים ליצירת מפת Google עם סמן באמצעות HTML:

  1. קבלת מפתח API
  2. יצירת קובצי HTML,‏ CSS ו-JS
  3. הוספת מפה
  4. הוספת סמן

צריך דפדפן אינטרנט. בוחרים דפדפן ידוע כמו Google Chrome (מומלץ),‏ Firefox,‏ Safari או Edge, בהתאם לפלטפורמה שלכם, מתוך רשימת הדפדפנים הנתמכים.

שלב 1: קבלת מפתח API

בקטע הזה מוסבר איך לאמת את האפליקציה שלכם מול Maps JavaScript API באמצעות מפתח API משלכם.

כדי לקבל מפתח API:

  1. נכנסים למסוף Google Cloud.

  2. יוצרים או בוחרים פרויקט.

  3. לוחצים על Continue כדי להפעיל את ה-API ואת כל השירותים הקשורים.

  4. בדף Credentials, מקבלים מפתח API (ומגדירים את ההגבלות על מפתח ה-API). הערה: אם יש לכם מפתח API קיים ללא הגבלות, או מפתח עם הגבלות בדפדפן, תוכלו להשתמש במפתח הזה.

  5. במאמר שימוש במפתחות API מוסבר איך למנוע גניבת מכסות ולאבטח את מפתח ה-API.

  6. מפעילים את החיוב. למידע נוסף, ראו שימוש וחיובים.

  7. עכשיו אתם מוכנים להשתמש במפתח ה-API.

שלב 2: יוצרים HTML,‏ CSS ו-JS

זהו הקוד של דף אינטרנט בסיסי ב-HTML:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

כדי לטעון מפה, צריך להוסיף תג script שמכיל את מערך האתחול של Maps JavaScript API, כפי שמוצג בקטע הקוד הבא (מוסיפים את מפתח ה-API שלכם):

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

ספוילר: אפשר לנסות את הדוגמה המוגמרת ב-JSFiddle.

שלב 3: מוסיפים מפה

כדי להוסיף מפת Google לדף, מעתיקים את רכיב ה-HTML gmp-map ומדביקים אותו בתוך ה-body של דף ה-HTML:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

התוצאה היא המפה הבאה:

המפה שיצרתם ממורכזת באזור המטרופוליטני של סן חוזה.

שלב 4: מוסיפים סמן

כדי להוסיף סימן למפה, משתמשים ברכיב ה-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

הקוד הקודם מוסיף שני סמנים ומשנה את הפרמטרים zoom ו-center ב-gmp-map כדי להציג את הסמנים האלה בצורה טובה יותר. נדרש מזהה מפה כדי להשתמש בסמנים מתקדמים (אפשר להשתמש ב-DEMO_MAP_ID).

טיפים ופתרון בעיות

  • אתם יכולים להתאים אישית את המפה באמצעות עיצוב מותאם אישית.
  • אתם יכולים להשתמש במסוף של כלי הפיתוח בדפדפן האינטרנט כדי לבדוק ולהריץ את הקוד, לקרוא דוחות שגיאות ולפתור בעיות בקוד.
  • כדי לפתוח את המסוף ב-Chrome, משתמשים במקשי הקיצור הבאים:
    Command+Option+J (ב-Mac) או Control+Shift+J (ב-Windows).

  • כדי לקבל את קואורדינטות קו הרוחב וקו האורך של מיקום במפות Google, פועלים לפי השלבים הבאים.

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

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

קוד לדוגמה מלא

בהמשך מופיעה המפה הסופית וקוד לדוגמה מלא ששימש במדריך הזה.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <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 script 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&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html