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

מבוא

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

שנתחיל?

אלה השלבים ליצירת מפת 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"
    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: מוסיפים סמן

כדי להוסיף סמן למפה, משתמשים ברכיב gmp-advanced-marker HTML. מעתיקים את קטע הקוד הבא ומדביקים אותו במקום כל 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