במדריך הזה תלמדו איך ליצור את אפליקציית ה-JavaScript הראשונה שלכם באמצעות מפות תלת-ממדיות ב-Maps JavaScript: חלון בסיסי שבו מוצג מבט מלמעלה על גשר שער הזהב, כשברקע רואים את מרין הדלנדס.
בסיום המדריך, המפה הבאה אמורה להופיע בסביבת הפיתוח:
הגדרת הסביבה
לפני שמתחילים לכתוב קוד, צריך להגדיר סביבה שמריצה JavaScript. במדריך הזה נשתמש בדפדפן אינטרנט כסביבה. בכל דפדפני האינטרנט המודרניים יש תמיכה מובנית ב-JavaScript, כך שאין צורך להתקין תוכנה נוספת.
- פותחים כלי לעריכת טקסט לפי בחירה.
- יוצרים קובץ חדש ושומרים אותו עם סיומת
.html(למשל,hello-p3djs.html).
כתיבת דף HTML
כדי להתחיל, יוצרים דף אינטרנט עם מבנה HTML בסיסי:
<html>
<head>
<title>Map</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
הוספת JavaScript
בשלב הבא, מוסיפים רכיב HTML בהתאמה אישית כדי לטעון את המפה. הקוד מכיל שני רכיבים:
-
gmp-map-3dמכיל את הפרמטרים שמשמשים לאתחול של מיקום המצלמה ותצוגת ההתחלה. -
scriptמכיל את הקריאה לטעינת Maps JavaScript API. חשוב להחליף את הערךYOUR_KEYבמפתח ה-API שלכם.
<html>
<head>
<title>Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script
async
src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
</head>
<body>
<gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
</gmp-map-3d>
</body>
</html>הפעלת האפליקציה
כדי להריץ את האפליקציה ולראות את הפלט:
- שומרים את קובץ ה-HTML שיצרתם.
- פותחים את הקובץ בדפדפן אינטרנט (אפשר ללחוץ לחיצה כפולה על הקובץ, לגרור אותו לחלון הדפדפן או ללחוץ לחיצה ימנית ולהשתמש באפשרות "פתיחה באמצעות").
- המפה אמורה להופיע בחלון הדפדפן.
מעולה! עכשיו כתבתם אפליקציה באמצעות מפות תלת-ממדיות של Google ב-Maps JavaScript API.
השלבים הבאים
- ליצור חוויות מורכבות יותר של מפות בתלת-ממד באמצעות הדוגמאות הקיימות של Google.
- כדי להבין את כל מה שאפשר לעשות עם מפות תלת-ממדיות ב-Maps JavaScript API, כדאי לקרוא את מאמרי העזרה.