1. Avant de commencer
Ce tutoriel explique comment ajouter et styliser des repères 3D dans votre application. Vous apprendrez également à animer votre application en effectuant des vols autour de lieux spécifiques.
Ce tutoriel s'appuie sur les concepts abordés dans le premier codelab. Si vous ne l'avez pas déjà fait, suivez cet atelier de programmation pour acquérir les connaissances de base nécessaires à cette application.
Objectifs de l'atelier
Cette application présente les principaux bureaux Google en Europe. Les utilisateurs peuvent sélectionner un bureau, s'en approcher et l'explorer, puis faire un zoom arrière pour revenir à la vue d'ensemble. Ces fonctionnalités, couramment utilisées dans les applications de voyage et d'exploration, offrent une expérience plus immersive aux utilisateurs.
Dans cet atelier de programmation, vous allez créer une application Web 3D qui:
- Charge l'API Maps JavaScript de manière dynamique.
- Ajoute des repères 3D à la carte.
- Définit le style des repères à l'aide de fichiers SVG.
- Possibilité de voler vers les repères et autour d'eux.
- Abstrait les emplacements du code dans un tableau.
Points abordés
- Fonctionnement des repères
- Comment appliquer un style aux repères
- Fonctionnement de l'animation avec les fonctions intégrées
- Emplacements de la caméra pour le cadrage par rapport aux points de référence
- Astuces utiles pour capturer les paramètres de la caméra afin de mieux cadrer les éléments.
Prérequis
Vous devez vous familiariser avec les éléments ci-dessous pour suivre cet atelier de programmation. Si vous maîtrisez déjà Google Maps Platform, passez directement à l'atelier de programmation.
Produits Google Maps Platform requis
Dans cet atelier de programmation, vous utiliserez les produits Google Maps Platform suivants :
- API Maps JavaScript
Autres conditions requises pour cet atelier de programmation
Pour suivre cet atelier de programmation, vous aurez besoin des comptes, des services et des outils suivants :
- Un compte Google Cloud pour lequel la facturation est activée.
- Une clé API Google Maps Platform pour laquelle l'API Maps JavaScript est activée
- Connaissances de base en JavaScript, HTML et CSS
- Un éditeur de texte ou un IDE de votre choix, pour enregistrer et afficher un fichier modifié.
- Un navigateur Web pour afficher le fichier pendant que vous travaillez.
2. Configuration
Configurer Google Maps Platform
Si vous ne disposez pas encore d'un compte Google Cloud Platform et d'un projet pour lequel la facturation est activée, consultez le guide Premiers pas avec Google Maps Platform pour savoir comment créer un compte de facturation et un projet.
- Dans Cloud Console, cliquez sur le menu déroulant des projets, puis sélectionnez celui que vous souhaitez utiliser pour cet atelier de programmation.
- Activez les API et les SDK Google Maps Platform requis pour cet atelier de programmation dans Google Cloud Marketplace. Pour ce faire, suivez les étapes indiquées dans cette vidéo ou dans cette documentation.
- Générez une clé API sur la page Identifiants de Cloud Console. Vous pouvez suivre la procédure décrite dans cette vidéo ou dans cette documentation. Toutes les requêtes envoyées à Google Maps Platform nécessitent une clé API.
3. Globe simple
Pour commencer à créer l'application, il est essentiel de définir la configuration de base. Vous obtiendrez alors une vue "marble bleu" de la Terre dans sa forme la plus essentielle, comme illustré ci-dessous:
Ajouter le code de la page de démarrage
Pour ajouter le globe au site, vous devez ajouter le code suivant à votre page. Une section pour le chargeur de l'API Maps JavaScript et une fonction d'initialisation qui crée l'élément de carte 3D sur la page dans laquelle vous ajouterez le code des repères seront ajoutées.
Assurez-vous d'ajouter votre propre clé (créée dans la section Configurer) à la page, sinon l'élément 3D ne pourra pas être initialisé.
<!DOCTYPE html>
<html>
<head>
<title>Step 1 - Simple Globe</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
mode: MapMode.HYBRID,
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
Vous pouvez maintenant commencer à cadrer le lieu d'intérêt, ce que vous ferez à l'étape suivante.
4. Cadre de la première vue
Maintenant que vous avez créé une carte avec une vue du globe, l'étape suivante de l'implémentation consiste à encadrer le bon point de départ. Cela permet à l'utilisateur d'obtenir un aperçu instantané de l'endroit où il travaille.
Bien que cet exemple se concentre sur les bureaux Google en Europe, vous pouvez appliquer cette approche à n'importe quel endroit dans le monde, d'un pays entier à un seul pâté de maisons. La rapidité et la flexibilité du produit vous permettent de faire passer votre application d'une échelle globale à une échelle locale avec un minimum de modifications de code.
Vous commencerez par le cadrage initial pour que la carte 3D ressemble à ceci:
Cadrer la caméra sur l'Europe
Pour obtenir l'affichage tel qu'il est présenté, vous devez cadrer l'affichage correctement, comme si vous positionniez une caméra dans l'espace en regardant vers le bas.
Pour ce faire, vous pouvez utiliser un certain nombre de paramètres de la commande de la carte pour définir les détails de la caméra. Le diagramme montre comment les paramètres interagissent dans le monde "réel". Plus précisément, il y a le centre vers lequel la caméra est dirigée et la distance à laquelle vous vous trouvez (la plage). Vous devez également définir l'inclinaison de la perspective de la caméra (sinon, vous aurez une vue plongeante perpendiculaire sur la Terre).
Le dernier paramètre, heading (direction), détermine la direction de la caméra. Il est mesuré en décalage par rapport au nord. Ces valeurs sont appliquées à l'élément Carte 3D en tant qu'objet pour configurer l'affichage initial. Vous pouvez le voir dans le code avec le constructeur d'élément 3D mis à jour.
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID
});
Paramètres de l'appareil photo de capture
Cadrer une vue dans une carte 3D nécessite un positionnement précis de la caméra, ce qui peut être difficile à réaliser uniquement avec du code. Pour simplifier ce processus, utilisez cette astuce: ajoutez une fonction à votre page qui capture les paramètres de la caméra lorsque vous cliquez sur la vue requise. Les paramètres s'affichent dans la console et sont prêts à être copiés dans les paramètres de la caméra de votre objet.
Vous trouverez le code que vous pourrez utiliser plus tard. Il a été ajouté à l'exemple de cette page, mais il ne figurera pas dans les exemples des pages suivantes, car il n'est pas nécessaire pour l'atelier de programmation. N'oubliez pas de l'utiliser si vous souhaitez créer des démonstrations plus immersives grâce à un meilleur positionnement de la caméra.
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
// Stop the camera animation when the map is clicked.
map3D.stopCameraAnimation();
});
Notez l'utilisation de la fonction stopCameraAnimation. Si la page fait un zoom avant ou une orbite, il est utile de pouvoir arrêter l'animation pour pouvoir capturer l'emplacement à l'écran à ce moment-là. Ce code vous permet de le faire. Pour en savoir plus, consultez la documentation sur stopCameraAnimation.
Exemple de résultat du clic, comme indiqué dans la console.
camera: { center: { lat: 51.39870122020001, lng : -0.08573187165829443, altitude: 51.66845062662254 }, range: 716.4743880553578, tilt: 50.5766672986501 ,heading: -1.048260134782318, }
step2.html:40 { lat: 51.398158351120536, lng : -0.08561139388593597, altitude: 51.860469133677626 }
Le texte de la caméra peut être utilisé comme entrée JSON dans divers objets de Maps 3D. La deuxième sortie correspond à l'emplacement réel du point où le clic s'est produit, ce qui est également utile pour créer des points ou tout autre élément permettant de positionner des repères.
Maintenant que la page est correctement cadrée, vous pouvez ajouter des repères. Passez à l'étape suivante pour découvrir comment procéder.
Solution de section
Pour cette étape, la page terminée est fournie en tant que solution pour valider votre implémentation. (Si vous copiez, assurez-vous d'utiliser votre propre clé API.)
<!DOCTYPE html>
<html>
<head>
<title>Step 2 - Europe View</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID,
});
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
map3D.stopCameraAnimation();
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
5. Repère simple
Dans cette section, vous allez apprendre à ajouter votre premier repère. Vous allez d'abord découvrir des informations générales sur les repères.
Les cartes 3D permettent de créer deux classes de repères différentes, la classe Marker3DElement et la classe Marker3DInteractiveElement. Le choix de la classe dépend de l'activation ou non des clics sur les repères. En dehors de cela, ils sont essentiellement identiques. Vous allez donc d'abord créer un Marker3DElement, puis le "mettre à niveau" en Marker3DInteractiveElement lors des étapes suivantes.
Vous pouvez consulter la solution complète pour cette étape ici:
Ajouter de la hauteur à vos repères
Tout d'abord, sachez que les repères sont en 3D, comme tous les autres éléments de la carte 3D. Cela signifie que l'emplacement peut avoir une hauteur (altitude) et que cette hauteur peut être représentée comme une position par rapport au niveau de la mer, au sol, au maillage ou être définie pour être fixée au sol et ignorer l'altitude. Pour en savoir plus, consultez la section "Constantes d'altitude" de la documentation sur AltitudeMode.
Vous pouvez également définir si le repère est extrudé ou non à l'aide de la valeur extruded. Cette option détermine si une petite ligne est tracée jusqu'au sol pour indiquer la position réelle par rapport à la hauteur. Elle est utile pour identifier des points au sol. Vous pouvez en voir un exemple avec l'emplacement Google au Royaume-Uni. Les deux sont extrudés et leur position est définie sur une hauteur absolue. Le premier à 75 mètres et le second à 125 mètres.
|
|
Altitude : 75 mètres. | Altitude : 125 mètres. |
Masquer ou afficher les repères avec occlusion et collision
Bien que cela ne soit pas important dans notre démonstration, car les positions sont assez éloignées, vous pouvez contrôler ce qui se passe pour les repères qui se chevauchent ou qui se trouvent derrière des bâtiments à l'aide des valeurs collisionBehavior ou drawsWhenOccluded.
Pour le comportement en cas de collision, vous avez les options suivantes:
REQUIRED(option par défaut) : le repère s'affiche toujours, quelle que soit la collision.OPTIONAL_AND_HIDES_LOWER_PRIORITY: le repère s'affiche uniquement s'il n'en chevauche pas d'autres. Si deux repères de ce type se chevauchent, celui avec lezIndexle plus élevé est affiché. S'ils ont le mêmezIndex, celui dont la position verticale à l'écran est la plus basse est affiché.REQUIRED_AND_HIDES_OPTIONAL: le repère s'affiche toujours peu importe le cas de collision. Les repères ou libellésOPTIONAL_AND_HIDES_LOWER_PRIORITYqui chevauchent le repère sont masqués.
Les images montrent les différences de présentation des repères en fonction du comportement de collision défini. Tous les repères sont affichés lorsque vous définissez REQUIRED, mais si vous utilisez REQUIRED_AND_HIDES_OPTIONAL, les repères situés plus bas sur l'écran s'affichent (vous pouvez modifier le zIndex pour afficher d'autres repères au-dessus si vous le souhaitez).
|
|
OBLIGATOIRE | REQUIRED_AND_HIDES_OPTIONAL |
Pour l'occlusion, vous pouvez choisir de dessiner des repères derrière des bâtiments ou non. Ce processus est illustré dans l'image suivante. Lorsque drawsWhenOccluded est défini sur "true", les repères sont légèrement atténués lorsqu'ils sont dessinés derrière des bâtiments. Lorsque ce paramètre est défini sur "false", les repères sont masqués lorsqu'ils se trouvent derrière un bâtiment. Pour en savoir plus, consultez le tableau suivant:
|
|
|
|
Comme indiqué, les repères masqués par collision sont affichés en demi-teinte si le dessin des repères masqués est autorisé. Sur l'image, vous pouvez voir certains repères masqués par les bâtiments et d'autres par d'autres repères.
Pour en savoir plus, consultez l'exemple collision-behavior dans une carte 2D.
Effacer le canevas
Il est maintenant temps de créer votre premier repère. Pour que l'utilisateur se concentre sur les repères, vous pouvez désactiver les libellés par défaut dans la carte 3D.
Définissez la valeur mode de l'élément de carte 3D sur SATELLITE.
Pour en savoir plus, consultez mode.
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE
});
Vous obtenez la carte 3D suivante:
Ajouter le premier repère
Maintenant que le canevas est vide, vous pouvez ajouter le premier repère. Les principaux paramètres incluent la position et le libellé.
Pour ajouter un repère, définissez sa position. Vous pouvez également inclure un libellé, qui s'affiche au-dessus du repère, et d'autres éléments, comme décrit dans la documentation Marker3DElement.
Pour ajouter notre repère, ajoutez le code suivant après la ligne qui masque les libellés par défaut, comme indiqué:
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
Après avoir créé le repère, ajoutez-le à la carte 3D à l'aide de la méthode d'ajout. N'oubliez pas que les repères sont stockés sous forme de tableau d'éléments enfants dans la carte 3D. Pour modifier un repère, vous devez y accéder via ce tableau.
Assurez-vous que Marker3DElement est chargé à partir de l'API Maps JavaScript en l'ajoutant à la liste des bibliothèques lorsque vous chargez l'API.
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
Lorsque la page se charge, l'ensemble de l'Europe est visible, avec un repère au-dessus du bureau de Londres. Comme illustré dans l'animation, vous pouvez faire un zoom avant manuel pour voir le repère sur l'emplacement créé.
Maintenant que vous avez chargé votre premier repère, l'étape suivante consiste à l'améliorer.
Solution de section
Pour cette étape, la page terminée est fournie en tant que solution pour valider votre implémentation. (Si vous copiez, assurez-vous d'utiliser votre propre clé API.)
<!DOCTYPE html>
<html>
<head>
<title>Step 3 - Simple Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
6. Repère SVG
À cette étape, vous allez améliorer l'apparence du repère en ajoutant un drapeau pour représenter le pays dans lequel il se trouve. Voyons comment procéder. Pour cela, vous devez vous familiariser avec PinElement.
Vous obtiendrez alors un nouveau look, comme illustré ci-dessous:
Personnalisation de base avec PinElement
L'élément PinElement est l'un des éléments partagés entre les repères de l'API JavaScript, que ce soit pour les cartes 2D ou 3D. Lorsque vous ajoutez un Marker3DElement à Map3DElement , vous ajoutez un PinElement en tant qu'élément enfant de Marker3DElement.
Le PinElement permet, à un niveau de base, de modifier le repère normal pour définir sa couleur de bordure, sa couleur de point intérieur (ou glyphe) et sa couleur d'arrière-plan. Vous pouvez les voir sur l'image représentant un repère 2D.
Vous pouvez également définir la taille d'un repère via l'élément en définissant sa valeur d'échelle (une valeur supérieure à 1 correspond à une taille plus grande que la normale, et une valeur inférieure à 1 à une taille plus petite).
Vous pouvez également remplacer le glyphe par une image ou un fichier SVG si vous souhaitez donner un aspect plus personnalisé, tout en conservant l'apparence standard du repère de carte PinElement.
Au-delà de PinElements
Pour cette étape, vous allez remplacer le PinElement standard par un indicateur SVG et différentes couleurs. Sachez également que vous pouvez complètement modifier l'apparence d'un repère pour qu'il ne ressemble même plus à une épingle de carte. Dans le repère, vous pouvez également insérer de nouveaux graphiques à l'aide de modèles, tels que HTMLImageElement et SVGElement. Pour en savoir plus, consultez la documentation Marker3DElement-Slots.
Pour découvrir toutes les possibilités, consultez les exemples suivants qui montrent comment styliser des repères à l'aide de plusieurs techniques différentes.
|
|
Repères avec personnalisation de base via PinElement, consultez les exemples. | Repères avec une personnalisation complexe via un modèle via SVG et des images (voir les exemples) |
Ajouter l'PinElement
Pour modifier l'apparence du repère, vous devez d'abord vous assurer que la bibliothèque PinElement a été ajoutée à la page. Pour ce faire, ajoutez la ligne de code suivante après l'importation de la bibliothèque maps3d:
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
Maintenant que l'élément est chargé, le PinElement peut être référencé et créé. Examinez le code, ajoutez-le entre l'endroit où le repère est créé et ajoutez-le à la carte 3D.
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
Comme vous ne chargez pas seulement une épingle de base, vous devez effectuer un certain nombre de tâches en plus de configurer le PinElement, avec sa couleur d'arrière-plan et son échelle associées.
Tout d'abord, vous devez faire référence à une image SVG pour l'icône du drapeau, un Union Jack dans ce cas. Vous pouvez les obtenir à partir d'une collection telle que celle-ci sur https://flagicons.lipis.dev/.
Une fois que vous avez l'icône, vous pouvez la placer à un endroit que le site peut localiser. Dans ce cas, vous pouvez coder en dur l'emplacement de l'image ou utiliser l'emplacement actuel du site comme bouchon du répertoire, comme indiqué ici avec la variable de base. Vous pouvez ensuite l'associer à l'emplacement sur le serveur de l'icône appropriée, qui se trouve ici sous '/images/gb.svg'.
Un élément de carte semblable à celui-ci est créé:
Une fois que vous avez placé le repère et le code au bon endroit, vous devriez obtenir une carte 3D semblable à celle-ci:
Maintenant que notre repère est tout pimpé, vous pouvez le modifier pour le rendre cliquable afin d'ajouter de l'interactivité. Vous le ferez à l'étape suivante.
Solution de section
Pour cette étape, la page terminée est fournie en tant que solution pour valider votre implémentation. (Si vous copiez, assurez-vous d'utiliser votre propre clé API.)
N'oubliez pas non plus que vous devrez obtenir le fichier SVG (ou PNG, au choix) du drapeau et l'enregistrer dans un répertoire accessible par votre page (ici, il est stocké dans le dossier "images").
<!DOCTYPE html>
<html>
<head>
<title>Step 4 - SVG Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
7. Repère interactif
À l'étape précédente, un repère a été ajouté à la page, mais à part être esthétique, il ne sert pas à grand-chose. Vous devez toujours interagir avec la carte 3D de la même manière. L'étape suivante consiste à ajouter la possibilité d'effectuer une action avec le repère lorsque vous cliquez dessus, ce qui lui permet de réagir aux interactions de l'utilisateur.
Pour ajouter cette fonctionnalité, vous devez transformer Marker3DElement en Marker3DInteractiveElement. Vous obtiendrez alors une page semblable, mais dans laquelle un clic sur le repère affichera une alerte qui se présentera comme suit:
Commencez par modifier la classe des repères.
Pour ajouter de l'interactivité à un repère, vous devez vous assurer qu'il utilise la bonne classe. Marker3DInteractiveElement est la classe requise, mais comme il s'agit d'une extension de Marker3DElement, vous n'avez rien d'autre à faire que de charger la nouvelle classe et de modifier son nom dans le constructeur.
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
Ensuite, ajoutez l'événement de clic au repère.
Ajoutez ensuite un événement de clic au repère pour gérer l'interaction utilisateur et y répondre. Dans l'extrait, vous pouvez voir que l'événement de clic est ajouté au repère. Dans ce cas, une alerte est déclenchée et affiche le texte qui affiche le libellé du repère, obtenu à partir de la cible de l'événement déclenché, ce qui nous permet d'accéder à la propriété du libellé. Ajoutez le code suivant à votre application juste après la création du repère.
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
Remarque : L'événement stopPropagation permet de s'assurer que tous les autres écouteurs de clics de la pile sont déclenchés sur les objets sous-jacents, tels que le canevas principal de la carte 3D.
Lorsque vous exécutez votre application, vous devriez obtenir le résultat suivant:
Maintenant que vous pouvez effectuer une action lorsque l'utilisateur clique sur le repère, vous pouvez ajouter une animation à la page à l'étape suivante.
Solution de section
Pour cette étape, la page terminée est fournie en tant que solution pour valider votre implémentation. (Si vous copiez, assurez-vous d'utiliser votre propre clé API.)
<!DOCTYPE html>
<html>
<head>
<title>Step 5 - Interactive Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
8. Aller à
À cette étape, vous allez pouvoir cliquer sur le repère pour ajouter une animation et vous rendre à son emplacement. Vous pouvez voir cela en action ici.
Animer avec flyCameraTo
Pour ajouter cela à la page, vous utiliserez la méthode flyCameraTo de Maps 3D, qui anime la caméra entre l'emplacement actuel de la caméra et l'emplacement que vous souhaitez afficher, en interpolant entre les deux et en animant le vol dans Maps 3D.
Lorsque vous utilisez flyCameraTo, vous devez spécifier FlyToAnimationOptions, qui comporte deux propriétés : endCamera, qui correspond à l'emplacement vers lequel la caméra doit pointer à la fin de l'animation, et durationMillis, qui correspond à la durée en millisecondes nécessaire pour effectuer la transition.
Dans l'exemple, orientez la caméra vers le bâtiment, qui correspond à la position du repère, avec une inclinaison de 65 degrés, une portée de 500 mètres et un cap de 0 degré. Définissez la chronologie de l'animation sur 12 500 millisecondes (12,5 s).
Remplacez l'événement d'alerte actuel de la page par l'extrait flyCameraTo:
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
Vous pouvez maintenant actualiser la page, cliquer sur le repère et accéder à Google UK, comme indiqué dans l'animation:
À cette étape, vous avez ajouté un repère cliquable qui fait voler la caméra jusqu'à l'emplacement du repère. À l'étape suivante, vous allez ajouter la possibilité de faire tourner la caméra autour du point pour qu'elle orbite autour de l'emplacement.
Solution de section
Pour cette étape, la page terminée est fournie en tant que solution pour valider votre implémentation. (Si vous copiez, assurez-vous d'utiliser votre propre clé API.)
<!DOCTYPE html>
<html>
<head>
<title>Step 6 - Zoom To</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
9. Voler
L'élément final de notre animation consiste à utiliser la méthode flyCameraAround pour animer une orbite autour du bâtiment. Vous obtiendrez alors une animation qui se dirigera vers le bâtiment, puis l'entourera comme indiqué. Cet exemple est probablement un peu rapide pour un exemple concret, mais il est utile pour montrer comment l'action fonctionne, sans être trop long. Vous pouvez jouer avec les délais jusqu'à obtenir une valeur qui vous convient.
Faisons un tour !
La méthode flyCameraAround est semblable à la fonction flyCameraTo en ce sens qu'elle accepte un certain nombre d'options en entrée qui contrôlent l'emplacement à orbiter, les paramètres de la caméra et le temps (en millisecondes) nécessaire pour l'orbite. Enfin, vous pouvez également spécifier le nombre de rotations pouvant se produire au cours de la période spécifiée. Vous pouvez consulter toutes les options dans FlyAroundAnimationOptions.
Mais attendez une minute !
Dans l'animation, vous pouvez voir l'avion voler vers l'emplacement, puis l'entourer, en enchaînant les animations. Pour ce faire, utilisez l'événement gmp-animationend de Maps 3D pour vous assurer que l'animation en cours est terminée avant de déclencher la suivante. Cette animation ne doit se produire qu'une seule fois avant de s'arrêter.
Examinez le code, puis insérez-le après le code ajouté dans la section précédente.
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
L'ajout de la possibilité d'écouter l'événement gmp-animationend permet d'appeler l'événement flyCameraAround. Définir le point de départ sur celui qui a été utilisé pour la caméra de fin de la méthode "Voler vers" permet d'obtenir une transition fluide (afin de ne pas provoquer de mouvements brusques vers un nouvel emplacement). Ici encore, durationMillis est défini pour contrôler la durée de l'animation. Dans ce cas, la méthode prend également une autre option, rounds, qui est définie sur 1.
Cela signifie que la caméra pivote autour du point une fois toutes les cinq secondes. Vous pouvez tester ces valeurs pour trouver le nombre qui vous convient.
À ce stade, l'animation se termine, mais vous ne voulez pas que l'événement gmp-animationend se déclenche à nouveau avec ce bit de code, ce qui entraînerait une orbite infinie. Pour éviter cela, définissez l'option de l'écouteur sur true pour once. Cela signifie que l'événement sera supprimé une fois qu'il sera terminé, ce qui évitera la boucle infinie.
Une fois cette étape effectuée, vous devriez pouvoir exécuter la solution et voir l'animation tourner autour du repère à la fin, comme illustré dans l'animation:
À ce stade, vous avez ajouté un repère sur lequel vous pouvez cliquer. La caméra se déplace ensuite vers l'emplacement du repère et l'entoure. À l'étape suivante, il est temps d'ajouter d'autres points et de nous permettre de passer de l'un à l'autre.
Solution de section
Pour cette étape, la page terminée est fournie en tant que solution pour valider votre implémentation. (Si vous copiez, assurez-vous d'utiliser votre propre clé API.)
<!DOCTYPE html>
<html>
<head>
<title>Step 7 - Zoom Around</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
10. Paris !
Londres est une ville formidable, mais elle semble un peu seule sur la page. Commençons donc à ajouter d'autres villes, en commençant par Paris. Pour ce faire, vous pouvez utiliser un tableau pour contenir toutes les informations spécifiques à l'emplacement, puis l'utiliser comme entrée pour les fonctions et les variables qui définissent les paramètres d'affichage des repères, ainsi que les mouvements de caméra vers et autour des emplacements de caméra. Comme indiqué, il peut être nécessaire de le faire différer de l'emplacement du point de repère pour cadrer une meilleure photo d'un bâtiment, par exemple.
Tableau des emplacements
Pour ne pas avoir à coder en dur tous les détails d'un emplacement particulier, tels que la caméra de visionnage, le point de repère et les options d'affichage, vous pouvez utiliser un petit tableau d'objets JSON pour stocker ces données. Vous pourrez ensuite l'appliquer lorsque les repères seront créés et utilisés dans l'application. Vous pouvez voir cet exemple dans l'extrait de code, qui crée une variable appelée officeLocations pour contenir le tableau.
Ajoutez le code suivant juste avant la fonction init. Notez également que la variable de base a été déplacée en dehors de la fonction init afin qu'elle puisse être appliquée à tous les sites.
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
Chaque établissement possède les propriétés suivantes:
- name :nom de l'emplacement.
- camera :vue initiale permettant d'examiner l'emplacement à survoler.
- point :emplacement où placer le repère.
- pin :détails de la couleur du repère et des propriétés du glyphe
Un angle différent
Vous remarquerez ici que pour le Royaume-Uni, le centre de la caméra et le point du repère sont identiques (à l'exception de l'altitude), tandis que pour la France, la caméra et le point sont différents. En effet, pour la France, le repère doit se trouver à un autre endroit que la vue initiale de la caméra, ce qui offre une meilleure vue de l'ensemble du bâtiment lorsque vous vous approchez et vous déplacez autour de lui que celle qui pourrait être obtenue si le point de repère était utilisé.
Revenir en Europe
L'ajout de points implique de pouvoir passer de l'un à l'autre. Vous pouvez utiliser un menu déroulant pour permettre la sélection, mais dans cet exemple, la caméra revient à la vue européenne à chaque fois pour permettre à l'utilisateur de sélectionner un autre emplacement.
Pour ce faire, la vue initiale doit être stockée dans une variable qui peut être utilisée pour réinitialiser la caméra sur l'ensemble de l'Europe. Dans cet exemple, ajoutez une variable appelée europeCamera pour la stocker pour une utilisation ultérieure.
Mettre à jour la fonction init
La première modification que vous devez apporter consiste à utiliser l'objet europeCamera comme entrée lors de la création de Map3DElement.
La deuxième modification que vous devez effectuer consiste à encapsuler la section de création de repères dans une boucle pour la mettre à jour avec les paramètres stockés dans les variables. Vous pouvez les voir dans le code présenté:
- office.point :emplacement du repère.
- office.name :nom de l'établissement utilisé pour le libellé du repère.
- office.camera :position initiale de la caméra.
- office.pin :options PinElement pour les différences d'affichage
N'oubliez pas non plus de télécharger un fichier ou une image au format SVG pour le drapeau français.
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
Notez qu'une deuxième fonction gmp-animationend est ajoutée après l'animation flyCameraAround pour gérer le retour à la vue européenne, à l'aide de la variable europeCamera stockée. Comme indiqué dans l'animation:
À ce stade, l'application a été étendue pour inclure deux emplacements et la possibilité de passer de l'un à l'autre à l'aide d'une animation et d'un tableau d'emplacements. À l'étape suivante, le reste des bureaux sera ajouté au tableau.
Solution de section
Pour cette étape, la page terminée est fournie en tant que solution pour valider votre implémentation. (Si vous copiez, assurez-vous d'utiliser votre propre clé API.)
N'oubliez pas non plus que vous devrez obtenir le fichier SVG (ou les fichiers PNG de votre choix) du drapeau et l'enregistrer dans un répertoire accessible par votre page (ici, il est stocké dans le dossier "images").
<!DOCTYPE html>
<html>
<head>
<title>Step 8 - Paris!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
11. Autres lieux
Bien que l'application dispose désormais de toutes les fonctionnalités nécessaires, la carte 3D semble encore un peu vide. Vous allez donc ajouter quelques autres lieux pour la rendre un peu plus dense. L'utilisation d'un tableau permet de continuer à renseigner de nouveaux emplacements, avec leurs propres repères uniques. La dernière étape consiste à continuer à ajouter des repères jusqu'à ce que la vue suivante s'affiche.
Ajoutez des repères.
Google possède plusieurs bureaux dans de nombreux pays d'Europe. Nous allons en ajouter quelques-uns sur la carte. Il suffit de mettre à jour le tableau. Il peut provenir d'un service Web ou être diffusé à partir d'un fichier statique. Dans notre cas, par souci de simplicité, il sera conservé sur la même page.
Vous pouvez ajouter autant de repères que vous le souhaitez. Ils sont détectés par la page, puis ajoutés automatiquement à la vue. N'oubliez pas d'obtenir les indicateurs appropriés et de les stocker dans le répertoire des images (ou à un autre emplacement pratique).
const officeLocations = [
{
name: "Google France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
Une fois que vous avez terminé, une page complète comme celle illustrée ci-dessous devrait s'afficher. Elle permet à l'utilisateur de cliquer sur n'importe quel emplacement, de s'y rendre et de l'explorer, puis de revenir en arrière.
Félicitations, vous avez terminé l'atelier de programmation. Dans la section suivante, nous allons faire le point et découvrir d'autres nouveautés à essayer.
Solution de section
Pour cette étape, la page terminée est fournie en tant que solution pour valider votre implémentation. (Si vous copiez, assurez-vous d'utiliser votre propre clé API.)
N'oubliez pas non plus que vous devrez obtenir le fichier SVG (ou les fichiers PNG de votre choix) du drapeau et l'enregistrer dans un répertoire accessible par votre page (ici, il est stocké dans le dossier "images").
<!DOCTYPE html>
<html>
<head>
<title>Step 9 - More Places!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
name: "Google France",
details: "8 Rue de Londres, 75009 Paris, France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
details: "6 Pancras Square, London N1C 4AG, UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
details: "Chau. d'Etterbeek 180, 1040 Brussel",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
details: "Stroupežnického 3191/17, 150 00 Praha 5-Smíchov",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
details: "Fragkokklisias 6, Athina 151 25",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
details: "ABC-Straße 19, 20354 Hamburg",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
details: "Gordon House, 4 Barrow St, Grand Canal Dock, Dublin 4, D04 V4X7",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
details: "Isola Building C, Via Federico Confalonieri, 4, 20124 Milano",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
details: "Vilnius Tech Park, Antakalnis st. 17, 2nd building, LT-10312, Vilnius",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
details: "Claude Debussylaan 34, 1082 MD Amsterdam",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
details: "Bryggegata 6, 0250 Oslo",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
details: "Rondo Daszynskiego 2, 00-843 Warsaw",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
details: "R. Duque de Palmela 37 Piso 4, 1250-097 Lisboa",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
details: "Bulevardul Corneliu Coposu 6-8, București 030167",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
details: "Torre Picasso, Pl. Pablo Ruiz Picasso, 1, Tetuán, 28020 Madrid",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
details: "Kungsbron 2, 111 22 Stockholm",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
details: "Brandschenkestrasse 110, 8002 Zürich",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'RELATIVE_TO_GROUND',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 2000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 2000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 2000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
12. Étapes suivantes
Dans cet atelier de programmation, vous avez découvert les principales fonctionnalités de la 3D dans l'API Maps JavaScript. Essayez ensuite d'ajouter les éléments suivants à la carte :
- Ajoutez une liste déroulante pour permettre de sélectionner un bureau.
- Utilisez d'autres options de style pour les repères pour ajouter un peu de fantaisie.
- Découvrez les autres bibliothèques disponibles pour l'API Maps JavaScript et qui proposent des fonctionnalités supplémentaires, comme Places pour afficher la note de chaque bureau à l'aide de son ID de lieu.
Pour découvrir d'autres façons d'utiliser Google Maps Platform et la 3D sur le Web, consultez les liens suivants: