מתחילים

הפלטפורמה: Android iOS JavaScript

במדריך הזה תלמדו איך ליצור את אפליקציית JavaScript הראשונה שלכם באמצעות מפות תלת-ממדיות פוטוריאליסטיות ב-Maps JavaScript: חלון בסיסי שמציג תצוגה עילית של גשר שער הזהב עם 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

לאחר מכן, מוסיפים רכיב HTML מותאם אישית כדי לטעון את המפה. הקוד מכיל שני רכיבים:

  • ‫gmp-map-3d מכיל את הפרמטרים שמשמשים לאתחול של מיקום המצלמה ותצוגת המצלמה ההתחלתיים.
  • ‫script מכיל את הקריאה לטעינת Maps JavaScript API. חשוב להחליף את הערך 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 mode="hybrid" center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=beta&libraries=maps3d"></script>
  </body>
</html>

הפעלת האפליקציה

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

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

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

השלבים הבאים

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