CATALOGUE Code & Data Formation Web App Créer une Web App - Vos sites Web sur mobiles

Créer une carte interactive pour localiser des boutiques à Paris

Retour à la formation
Chapitre 8 Leçon 19
Précédent
Suivant

Apprenez à intégrer l'API Google Maps dans une page web afin de géolocaliser des boutiques à Paris, en utilisant du HTML, JavaScript et CSS.

Détails de la leçon

Description de la leçon

Dans ce tutoriel, nous allons vous montrer comment créer une application web pour géolocaliser des boutiques à Paris en utilisant l'API Google Maps. Nous commencerons par l'intégration du code HTML, où nous définirons des blocs div spécifiques pour la localisation des boutiques et l'affichage de la carte. Ensuite, nous passerons au JavaScript pour configurer la fonction Show Google Maps, laquelle sera appelée au chargement de la page (window.onload).

Cette fonction vérifie la disponibilité de la fonctionnalité de géolocalisation du navigateur et appelle en conséquence la fonction affiche Position pour centrer la carte sur Paris. Elle ajoute également des marqueurs pour indiquer les positions exactes des boutiques en utilisant leurs coordonnées de latitude et longitude, récupérées directement depuis Google Maps. Enfin, nous personnaliserons l'apparence de la carte via du CSS en définissant sa taille et ses marges.

A la fin de ce tutoriel, vous aurez une application entièrement fonctionnelle et capable d'afficher une carte avec des points de géolocalisation spécifiques à Paris, tout en s'assurant que l'expérience utilisateur est optimale en gérant les erreurs de géolocalisation éventuelles.

Objectifs de cette leçon

Les objectifs de cette vidéo sont les suivants :

  • Comprendre comment intégrer l'API Google Maps dans une page web.
  • Savoir géolocaliser et afficher des marqueurs sur une carte.
  • Personnaliser l'aspect visuel de la carte avec du CSS.

Prérequis pour cette leçon

Pour suivre ce tutoriel, il est recommandé d'avoir des connaissances de base en HTML, JavaScript et CSS. Une compréhension basique des APIs peut également être utile.

Métiers concernés

Les professionnels suivants peuvent trouver utile ce tutoriel :

  • Développeurs web
  • Intégrateurs
  • Urbanistes
  • Responsables de magasin ou de chaîne de boutiques

Alternatives et ressources

Voici quelques alternatives à l'API Google Maps que vous pouvez utiliser pour des fonctionnalités de géolocalisation :

  • OpenStreetMap
  • Leaflet.js
  • Mapbox

Questions & Réponses

En utilisant la propriété navigator.geolocation dans JavaScript. Si cette propriété est disponible, la géolocalisation est supportée.
Pour récupérer les coordonnées, faites un clic droit sur l'adresse souhaitée dans Google Maps et sélectionnez 'Plus d'infos sur cet endroit'. Vous pourrez alors voir ses coordonnées de latitude et longitude.
Le type de carte par défaut utilisé est une carte routière. Il est possible de spécifier d'autres types tels que le satellite ou le terrain.