איך מתחילים?

במדריך הזה תלמדו איך ליצור את תוכנית JavaScript הראשונה שלכם באמצעות האפליקציה הפוטוריאליסטית מפות Google ב-JavaScript של מפות Google: חלון פשוט שמציג מבט במבט-על של גשר שער הזהב, כשברקע מופיעה ה-Marin Headlands.

בסיום המדריך אתם אמורים לראות את המפה הבאה בסביבת הפיתוח שלכם:

הגדרת הסביבה

לפני שמתחילים לכתוב קוד, צריך להגדיר סביבה שמריצה JavaScript. במדריך הזה משתמשים בדפדפן אינטרנט בתור הסביבה. בכל דפדפני האינטרנט המודרניים יש תמיכה מובנית ב-JavaScript, כך שאין צורך להתקין תוכנות נוספות.

  1. פותחים כלי לעריכת טקסט.
  2. יוצרים קובץ חדש ושומרים אותו עם סיומת .html (לדוגמה, hello-p3djs.html).

כתיבת דף HTML

כדי להתחיל, תיצור דף אינטרנט עם מבנה HTML בסיסי:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

הוספת JavaScript

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

  • gmp-map-3d מכיל את הפרמטרים שמשמשים לאתחול המיקום והתצוגה של המצלמה ההתחלתית.
  • השדה script מכיל את הקריאה לטעינת ממשק ה-API של JavaScript של מפות Google. חשוב להחליף את YOUR_KEY במפתח ה-API.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

הפעלת התוכנית

כדי להפעיל את התוכנית ולראות את הפלט, מבצעים את השלבים הבאים:

  1. שומרים את קובץ ה-HTML שיצרתם.
  2. פותחים את הקובץ בדפדפן אינטרנט (אפשר ללחוץ לחיצה כפולה על הקובץ, לגרור אותו לחלון דפדפן, או ללחוץ לחיצה ימנית ולהשתמש באפשרות 'פתיחה באמצעות').
  3. המפה אמורה להופיע בחלון הדפדפן.

כל הכבוד! כתבתם עכשיו תוכנית באמצעות Maps JavaScript API של Google Maps API עם מפות פוטוריאליסטיות בתלת-ממד.

השלבים הבאים

  • אפשר ליצור חוויות מורכבות יותר במפה בתלת-ממד באמצעות הדוגמאות הקיימות של Google.
  • תוכלו לגלות את הפוטנציאל המלא של מפות תלת-ממדיות ב-Maps JavaScript API במאמרי העזרה.