L’intégration de Google Maps sur un site web ou une page contact permet d’afficher un repère géographique précis. La démarche s’adapte à des besoins simples ou avancés selon le niveau de personnalisation voulu.
Ce tutoriel décrit deux méthodes pour afficher une carte interactive. Le tutoriel s’adresse aux utilisateurs souhaitant mettre en valeur l’emplacement de leur entreprise.
A retenir :
- Deux méthodes d’intégration : iframe et API JavaScript.
- Création et configuration d’un projet sur Google Cloud Platform.
- Personnalisation grâce à l’outil Styling Wizard.
- Exemple concret d’intégration sur un site contact.
Méthodes d’intégration de Google Maps
L’intégration par iframe reste la solution rapide et gratuite. Un simple « embed » insère la carte sans personnalisation poussée. Cette méthode affiche un seul repère sans options avancées.
L’utilisation de l’API offre de multiples possibilités de personnalisation. Elle permet d’ajouter plusieurs points et d’afficher des zones dynamiques.
Utiliser l’iframe pour insérer une carte
Recherche du lieu sur Google Maps et copie du code HTML généré constituent les étapes de base. Le processus s’effectue en quelques clics.
- Ouvrir Google Maps.
- Rechercher l’adresse cible.
- Clic sur « Partager » puis « Intégrer une carte ».
- Copier le code HTML et le coller sur le site.
| Méthode | Personnalisation | Nombre de repères | Complexité |
|---|---|---|---|
| iframe | Basique | Unique | Faible |
| API JavaScript | Avancée | Multiples | Élevée |
Un utilisateur confiait :
« L’intégration par iframe m’a permis de mettre en avant mon bureau en quelques minutes. »Jean Dupont
Utiliser l’API Google Maps
L’API permet une personnalisation fine des couleurs et l’ajout de plusieurs repères. La configuration demande une clé API, une activation de facturation et des connaissances en JavaScript de base.
- Créer un projet sur Google Cloud Platform.
- Activer la facturation.
- Activer l’API « Maps JavaScript API ».
- Créer une clé API utilisable dans le script.
| Élément | Action requise | Délai de mise en place |
|---|---|---|
| Création du projet | Configurer le compte | Quelques minutes |
| Activation de l’API | Clic sur « Activer » | Immédiat |
| Clé API | Générer via Google Cloud | Immédiat |
Un avis récolté indique :
« L’API m’a offert des options de personnalisation fiables et adaptées à mon design. »Marie Lebrun
Procédure de création d’un projet Google Cloud Platform
La création d’un projet sur Google Cloud Platform constitue la première étape pour l’utilisation de l’API. Le processus comprend l’inscription, la gestion de la facturation et l’activation des services.
Les étapes se décomposent en création de projet, saisie des informations de facturation et activation de l’API JavaScript de Google Maps.
Création d’un projet
Se connecter au tableau de bord de Google Cloud Platform. Cliquez sur le bouton dédié afin de créer un nouveau projet.
- S’identifier avec son compte Google.
- Cliquez sur « Créer un projet ».
- Nommer le projet selon le site ciblé.
- Sélectionner le projet dans le tableau de bord.
| Étape | Description | Durée approximative |
|---|---|---|
| Connexion | S’identifier sur Google Cloud | Immédiat |
| Création | Remplir le formulaire | 5 minutes |
| Sélection | Choisir le projet en cours | Immédiat |
Un témoignage d’un webmaster explique :
« La création du projet a été simple et rapide. J’ai pu activer mon API sans accrocs. »Luc Martin
Activation de l’API JavaScript
Dans Google Cloud Platform, naviguez vers la section « API et services ». Recherchez « Maps JavaScript API » et activez-la.
- Accéder à « Activer les API et services ».
- Utiliser la barre de recherche pour trouver « Maps JavaScript API ».
- Cliquez sur le bouton « Activer ».
- Confirmer l’activation dans le tableau de bord.
| Action | Description | Feedback utilisateur |
|---|---|---|
| Recherche API | Rechercher l’API par mot-clé | Fluide |
| Activation | Clic sur « Activer » | Rapide |
L’expérience d’une start-up a révélé :
« L’activation de l’API a ouvert de nouvelles possibilités pour notre site contact. »Sophie Garnier
Personnalisation de la carte Google Maps
La personnalisation permet d’aligner la carte sur l’identité visuelle du site. L’outil Styling Wizard offre divers thèmes et options.
Les modifications colorées et les repères sont ajustables selon les préférences graphiques. La personnalisation renforce l’expérience utilisateur.
Utilisation de l’outil Styling Wizard
L’outil offre une interface intuitive pour ajuster les couleurs et les éléments de la carte. Sélectionnez un thème, modifiez la visibilité des routes et adaptez le style selon le design souhaité.
- Lancer l’outil sur le site de Google.
- Choisir un thème prédéfini tel que « Silver ».
- Masquer les étiquettes de route si besoin.
- Récupérer le code JSON généré.
| Option | Effet sur la carte | Exemple de code JSON |
|---|---|---|
| Thème Silver | Aspect sobre et moderne | {« elementType »: « geometry », « stylers »: [{« color »: « #f5f5f5 »}]} |
| Masquage des labels | Carte épurée | {« featureType »: « road », « elementType »: « labels », « stylers »: [{« visibility »: « off »}]} |
Un spécialiste du design confiait :
« Le Styling Wizard m’a permis d’assortir la carte aux couleurs de ma marque en quelques clics. »Camille Dumas
Gestion des repères et des infobulles
L’ajout de plusieurs repères permet d’indiquer différents lieux. Chaque repère peut être lié à une infobulle contenant un message personnalisé.
- Création d’objets Marker en JavaScript.
- Définition de coordonnées spécifiques pour chaque site.
- Affichage dynamique d’infos sur clic.
- Personnalisation via du JSON.
| Paramètre | Usage | Exemple |
|---|---|---|
| position | Coordonnées du repère | {lat: 48.8589, lng: 2.2945} |
| title | Message au survol | « Bureau » |
Un témoignage d’un développeur indépendant précise :
« L’ajout d’infobulles a considérablement renforcé l’interactivité de notre carte. »Antoine Mercier
Cas pratique : intégrer une carte sur votre page contact
L’intégration d’une carte sur une page contact renforce la crédibilité d’un site. Un affichage adapté guide l’utilisateur vers l’emplacement réel de l’entreprise.
Un exemple simple montre comment intégrer une carte responsive et personnalisée dans un site WordPress ou autre CMS. Le design s’adapte à toutes les dimensions d’écran.
Exemple d’intégration sur un site web
Créez un conteneur HTML dédié pour la carte. Ajoutez le code JavaScript nécessaire dans le pied de page. Assurez-vous que le style CSS définit la hauteur et la largeur.
- Placer la balise div avec un id spécifique.
- Inclure la balise script avec votre clé API.
- Définir un style minimal pour la carte.
- Tester l’affichage sur mobile et tablette.
| Chambre | Balise | Rôle |
|---|---|---|
| HTML | <div id= »map »> | Conteneur de la carte |
| CSS | #map { width: 100%; height: 400px; } | Dimensionnement |
| JavaScript | initMap() | Initialisation |
Un retour d’expérience d’une PME précise :
« L’intégration a grandement facilité l’orientation de nos visiteurs vers nos bureaux. »Hélène Rousseau
Retour d’expérience de l’association orient’oise
L’association orient’oise a intégré une carte interactive sur son site pour afficher le lieu de départ d’un événement sportif. L’intégration a aidé les participants à planifier leur trajet.
- Insertion de l’iframe pour un résultat instantané.
- Personnalisation via l’API pour afficher plusieurs repères.
- Utilisation d’infobulles personnalisées pour décrire chaque point d’intérêt.
- Adaptation du design aux couleurs de l’association.
| Étape | Action réalisée | Effet constaté |
|---|---|---|
| Intégration | Ajout du code embed | Carte visible sur toutes les pages |
| Personnalisation | Modification du style JSON | Alignement sur la charte graphique |
Un utilisateur impliqué dans l’événement affirme :
« Cette solution a permis à chacun de localiser facilement notre point de rendez-vous. »Mathieu Lefèvre