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

מבוא

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

שנתחיל?

אלה השלבים ליצירת מפה ב-Google Maps עם סמן באמצעות 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
    async
    src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
></script>

מכיוון שדף ה-HTML צריך להיות עצמאי, צריך להוסיף את קוד ה-CSS ישירות לדף:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

שלב 3: הוספת מפה

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

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

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

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

כדי להוסיף סמן למפה, משתמשים ברכיב ה-HTML‏ gmp-advanced-marker. מעתיקים את קטע הקוד הבא ומדביקים אותו על כל ה-gmp-map שהוספתם בשלב הקודם.

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

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

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

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

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

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

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

  • אתם יכולים להמיר כתובת לקואורדינטות של קו רוחב וקו אורך באמצעות שירות המרת הכתובות לקואורדינטות (geocoding). במדריכים למפתחים מוסבר בפירוט איך מתחילים להשתמש בשירות Geocoding.

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

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

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>