Dans ce tutoriel, vous allez apprendre à créer votre premier programme JavaScript à l'aide de cartes 3D photoréalistes dans Maps JavaScript. Il s'agit d'une fenêtre simple qui affiche une vue aérienne du pont du Golden Gate avec les Marin Headlands en arrière-plan.
Une fois le tutoriel terminé, vous devriez voir la carte suivante dans votre environnement de développement :
Configurer votre environnement
Avant de commencer à écrire du code, vous devez configurer un environnement qui exécute JavaScript. Pour ce tutoriel, vous utiliserez un navigateur Web comme environnement. Tous les navigateurs Web modernes sont compatibles avec JavaScript. Vous n'avez donc pas besoin d'installer de logiciel supplémentaire.
- Ouvrez l'éditeur de texte de votre choix.
- Créez un fichier et enregistrez-le avec l'extension
.html
(par exemple,hello-p3djs.html
).
Rédiger une page HTML
Pour commencer, vous allez créer une page Web avec une structure HTML de base :
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
Ajouter du code JavaScript
Vous allez ensuite ajouter du code JavaScript pour charger la carte. Le code contient deux éléments :
gmp-map-3d
contient les paramètres utilisés pour initialiser la position et la vue de la caméra de départ.script
contient l'appel permettant de charger l'API Maps JavaScript. Veillez à remplacerYOUR_KEY
par votre clé 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" range="2000" tilt="75" heading="330"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
Exécuter le programme
Pour exécuter le programme et afficher le résultat, procédez comme suit:
- Enregistrez le fichier HTML que vous avez créé.
- Ouvrez le fichier dans un navigateur Web (vous pouvez double-cliquer dessus, le faire glisser dans une fenêtre de navigateur ou effectuer un clic droit et sélectionner "Ouvrir avec").
- La carte devrait s'afficher dans la fenêtre de votre navigateur.
Félicitations ! Vous venez d'écrire un programme utilisant les cartes 3D photoréalistes de l'API Maps JavaScript de Google.
Étapes suivantes
- Créez des expériences de cartes 3D plus complexes à l'aide des exemples existants de Google.
- Découvrez tout le potentiel des cartes 3D dans l'API Maps JavaScript en consultant la documentation de référence.