Premiers pas

Sélectionnez une plate-forme : Android iOS JavaScript

Dans ce tutoriel, vous allez créer votre première application JavaScript à l'aide de 3D Maps dans Maps JavaScript : une fenêtre de base qui affiche une vue aérienne du Golden Gate Bridge avec les Marin Headlands en arrière-plan.

Une fois le tutoriel terminé, la carte suivante devrait s'afficher dans votre environnement de développement :

Configurer votre environnement

Avant de commencer à écrire du code, vous devez configurer un environnement qui exécute JavaScript. Dans 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 logiciels supplémentaires.

  1. Ouvrez l'éditeur de texte de votre choix.
  2. Créez un fichier et enregistrez-le avec l'.html extension (par exemple, hello-p3djs.html).

Écrire une page HTML

Pour commencer, créez une page Web avec une structure HTML de base :

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

Ajouter du code JavaScript

Ensuite, ajoutez un élément HTML personnalisé 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 à remplacer YOUR_KEY par votre clé 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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

Exécuter l'application

Pour exécuter l'application et afficher le résultat, procédez comme suit :

  1. Enregistrez le fichier HTML que vous avez créé.
  2. Ouvrez le fichier dans un navigateur Web (vous pouvez double-cliquer sur le fichier, le faire glisser dans une fenêtre de navigateur, ou faire un clic droit et utiliser "Ouvrir avec").
  3. La carte devrait s'afficher dans la fenêtre de votre navigateur.

Félicitations ! Vous venez d'écrire une application à l'aide de l'API Maps JavaScript 3D dans Google Maps.

Étapes suivantes

  • Créez des expériences de carte 3D plus complexes à l'aide des exemples existants de Google samples.
  • Découvrez tout le potentiel de l'API 3D Maps dans l'API Maps JavaScript en lisant la documentation de référence.