הוספת מפת 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 שמכיל את טוען אתחול עבור 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>

    <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