CATALOGUE Code & Data Formation Web App Créer une Web App Créer une carte interactive pour localiser des boutiques à Paris

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

Géolocaliser
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Créer une Web App
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

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.

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.

Voir plus
Questions réponses
Comment vérifier si le navigateur supporte la géolocalisation ?
En utilisant la propriété navigator.geolocation dans JavaScript. Si cette propriété est disponible, la géolocalisation est supportée.
Comment récupérer les coordonnées d'une adresse sur Google Maps ?
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.
Quel type de carte par défaut est utilisé dans ce tutoriel ?
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.

Programme détaillé