Les cartes sont un aspect essentiel de tout site Web d'entreprise. Même si vous êtes complètement basé sur Internet, les clients aiment toujours savoir qui vous êtes et où vous habitez. Google Maps est désormais la valeur par défaut pour de nombreux sites Web, car il est le plus facile à utiliser, apparemment le plus précis et gratuit. À la fin de ce didacticiel, vous saurez exactement comment intégrer une carte Google Map réactive à votre site Web.
Par défaut, Google Maps ne répond pas toujours, il est donc possible que l’échelle ne soit pas adaptée à différentes tailles d’écran. Selon que vous utilisiez un plugin WordPress ou que vous l'incorporiez vous-même à l'aide de code, vous devrez peut-être ajouter quelques lignes de CSS pour que la carte soit réactive.
Site Web adaptatif
Réactif est un terme clé ici. Il décrit une conception Web qui prend en compte l'expérience utilisateur et le périphérique afin de s'assurer qu'ils sont identiques quel que soit le périphérique utilisé pour accéder au site Web. Par exemple, un site Web réactif devrait offrir la même qualité d'expérience, que vous le visitiez sur un ordinateur de bureau, une tablette ou un smartphone.
Pour ce faire, le site Web doit s'adapter à différentes résolutions, tailles d'écran et tactiles.
Intégration d'une Google Map réactive dans un site Web
À ma connaissance, il existe trois façons d'intégrer Google Maps à un site Web. Si vous utilisez un thème WordPress, la fonctionnalité peut être intégrée. Vous pouvez également utiliser un plugin ou intégrer le code directement à partir de Google dans n’importe quel site Web. Les première et deuxième options sont très utiles pour les utilisateurs de WordPress. D'autres CMS utilisent également des plugins pour que vous soyez couvert. La dernière option, l’utilisation de code, devrait fonctionner sur la plupart des sites Web, quelle que soit la manière dont ils ont été construits.
Utiliser un thème WordPress pour intégrer une carte Google réactive
Certains thèmes WordPress auront une fonctionnalité spécifique pour Google Maps. Les cartes étant un élément fondamental des sites Web modernes, certains concepteurs de thèmes les ont intégrées directement dans leurs conceptions. Si votre thème a une fonctionnalité de carte, vous aurez probablement besoin d'une API Google Maps pour la faire fonctionner. Vous ajoutez l'API dans les options de thème et celui-ci communiquera directement avec Google pour créer la carte à chaque visite.
- Visitez cette page sur le site Web de Google pour commencer le processus de l'API.
- Sélectionnez le bouton bleu Get Started.
- Sélectionnez l'icône de menu à trois lignes en haut à gauche du nouvel écran.
- Sélectionnez API et services, puis informations d'identification.
- Sélectionnez Créer les informations d'identification, puis la clé API.
- Sélectionnez Restreindre la clé, puis sélectionnez HTTP.
- Sélectionnez Enregistrer.
- Copiez la clé API et collez-la dans la page des options de conception qui en a besoin.
Une fois que vous avez la clé API, vous pouvez implémenter Google Map dans votre site Web à l'aide des outils de conception de thèmes. Tant que le thème est réactif, la carte devrait l'être aussi.
Utiliser un plugin pour intégrer une carte Google réactive
WordPress utilise des plugins, Joomla utilise des extensions, Drupal utilise des modules ou des plugins et les autres CMS utilisent des conventions de dénomination similaires. Dans tous les cas, les plugins font référence à des éléments modulaires que vous pouvez intégrer à votre CMS principal pour ajouter des fonctionnalités. Une fonctionnalité utile est une carte Google. Si le thème de votre site Web n'inclut pas d'élément de carte et que vous ne voulez pas créer le code vous-même, un plugin est la meilleure chose à faire.
- Dans WordPress, accédez à Plugins et Ajouter un nouveau.
- Recherchez Google Maps et sélectionnez un plugin qui vous ressemble.
- Activez-le dans Plugins et accédez à ses paramètres.
- Ajoutez l'API Google Maps que vous avez créée ci-dessus à l'endroit indiqué et enregistrez.
- Implémentez le plugin où vous voulez que la carte apparaisse.
Les autres CMS diffèrent légèrement par leurs noms et leurs positions dans les menus mais le principe est sensiblement le même. La plupart des plugins, sinon tous, nécessitent le fonctionnement de l'API Google Maps.
Utiliser le code pour intégrer une carte Google réactive
Si vous n'utilisez pas WordPress ou un autre système de gestion de contenu, vous pouvez toujours intégrer une carte Google interactive. Vous avez juste besoin d'utiliser du code au lieu d'un module. Cela prend un peu plus de travail mais fournira les mêmes cartes réactives.
- Visitez Google Maps et naviguez jusqu'à ce que la carte que vous souhaitez afficher remplisse l'écran.
- Sélectionnez le lien Partager bleu et copiez le code à partir de Embed Map.
- Ajoutez votre code d'intégration spécifique au code ci-dessous entre et.
- Ajoutez le code dans le code HTML de votre page Web où vous voulez voir la carte.
- Enregistrez vos modifications.
Le code:
Ce n'est pas mon code, je l'ai trouvé en ligne mais je l'ai testé sur mon site web. Cela fonctionne comme un charme et devrait fonctionner si vous utilisez un CMS, HTML, Hugo ou l’un des nombreux autres langages de sites Web ou outils de page.
