הוספת מפת 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. לוחצים על המשך כדי להפעיל את ה-API ואת השירותים הקשורים.

  4. בדף Credentials, מקבלים API key (ומגדירים את ההגבלות על מפתחות ה-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 שמכיל את ה-Boot-loader של Maps JavaScript API, כפי שמוצג בקטע הקוד הבא (הוספת מפתח API משלכם):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&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).

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

  • אפשר להתאים אישית את המפה באמצעות עיצוב בהתאמה אישית.
  • השתמשו ב-Developer Tools Console בדפדפן האינטרנט כדי לבדוק ולהריץ את הקוד, לקרוא דוחות שגיאה ולפתור בעיות בקוד.
  • אפשר להשתמש במקשי הקיצור הבאים כדי לפתוח את המסוף ב-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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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