reviewsהשקת Places UI Kit: ספריית רכיבים מוכנה לשימוש בעלות נמוכה, שמאפשרת לכם להוסיף לכל מפה שתבחרו את ממשק המשתמש המוכר של 'מקומות' במפות Google. כדאי לנסות אותו ולשלוח לנו משוב כדי לעזור לנו לעצב את העתיד של GMP.
קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
במדריך הזה תלמדו איך ליצור את אפליקציית JavaScript הראשונה שלכם באמצעות האפליקציה הפוטוריאליסטית תלת-ממדית של מפות Google ב-JavaScript של מפות Google: חלון בסיסי שמציג מבט במבט-על של גשר שער הזהב, עם הראש של Marin Headlands.
בסיום המדריך אתם אמורים לראות את המפה הבאה בסביבת הפיתוח שלכם:
הגדרת הסביבה
לפני שמתחילים לכתוב קוד, צריך להגדיר סביבה שמריצה JavaScript. במדריך הזה משתמשים בדפדפן אינטרנט בתור הסביבה. בכל דפדפני האינטרנט המודרניים יש תמיכה מובנית ב-JavaScript, כך שאין צורך להתקין תוכנות נוספות.
פותחים כלי לעריכת טקסט.
יוצרים קובץ חדש ושומרים אותו עם סיומת .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 מכיל את הקריאה לטעינת ממשק ה-API של JavaScript של מפות Google. חשוב להחליף את YOUR_KEY במפתח ה-API.
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-04-29 (שעון UTC)."],[],[],null,["\u003cbr /\u003e\n\n| This product or feature is in Preview (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google\n| Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage\n| descriptions](/maps/launch-stages).\n\n\u003cbr /\u003e\n\nSelect platform: [Android](/maps/documentation/maps-3d/android-sdk/add-a-3d-map \"View this page for the Android platform docs.\") [iOS](/maps/documentation/maps-3d/ios-sdk/add-a-3d-map \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/3d/get-started \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nIn this tutorial, you'll guide yourself through creating your first JavaScript\napplication using Photorealistic 3D Maps in Maps JavaScript: a basic window that displays\nan overhead view of the Golden Gate Bridge with the Marin Headlands in the\nbackground.\n\nUpon completing the tutorial, you should see the following map in your\ndevelopment environment:\n\nSet up your environment\n\nBefore you begin writing code, you must set up an environment that runs\nJavaScript. For this tutorial, you'll use a web browser as your environment. All\nmodern web browsers have built-in support for JavaScript, so you don't need to\ninstall any additional software.\n\n1. Open a text editor of your choosing.\n2. Create a new file and save it with an `.html` extension (e.g., `hello-p3djs.html`).\n\nWrite an HTML page\n\nTo start, you'll create a web page with a basic HTML structure: \n\n \u003c!DOCTYPE html\u003e\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eHello Photorealistic 3D Maps in Maps JavaScript\u003c/title\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003c!-- Your JavaScript code will go here --\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nAdd JavaScript\n\nNext, you'll add a custom HTML element to load the map. The code contains two\nelements:\n\n- `gmp-map-3d` contains the parameters used for initializing the starting camera position and view.\n- `script` contains the call to load the Maps JavaScript API. Be sure to replace `YOUR_KEY` with your API key.\n\n \u003c!DOCTYPE html\u003e\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eHello Photorealistic 3D Maps in Maps JavaScript\u003c/title\u003e\n\n \u003cstyle\u003e\n html,\n body {\n height:100%;\n margin: 0;\n padding: 0;\n }\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cgmp-map-3d mode=\"hybrid\" center=\"37.841157, -122.551679\" range=\"2000\" tilt=\"75\" heading=\"330\"\u003e\u003c/gmp-map-3d\u003e\n \u003cscript async src=\"https://maps.googleapis.com/maps/api/js?key=\u003cYOUR_KEY\u003e&v=beta&libraries=maps3d\"\u003e\u003c/script\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nRun the application\n\nTo run the application and see the output, follow these steps:\n\n1. Save the HTML file you created.\n2. Open the file in a web browser (you can double-click the file, drag it into a browser window, or right-click and use \"Open with\").\n3. You should see the map in your browser window.\n\nCongratulations! You've just written an application using Google's\nPhotorealistic 3D Maps in Maps JavaScript API.\n\nNext steps\n\n- Build more complicated 3D map experiences using Google's existing [samples](/maps/documentation/javascript/examples/3d/simple-map).\n- Discover the full potential of the Photorealistic 3D Maps in Maps JavaScript API by reading the [reference documentation](/maps/documentation/javascript/reference/3d-map)."]]
