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

מבוא

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

שנתחיל?

אלה השלבים ליצירת מפה של 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="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

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

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

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

הקוד שלמעלה מוסיף סמן למפה. כדי להשתמש בסמנים מתקדמים, צריך להזין מזהה מפה (אפשר להשתמש ב-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>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></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>
index.html