Souhaitez-vous inclure Google Maps sur le site internet afin de permettre aux clients de vous trouver plus facilement ? Vous voulez le concevoir aux couleurs d’une marque ?
Intégrer Google Maps dans une iframe
Cette solution consiste à ajouter une iframe à votre site, ce qui est gratuit et illimité. Avec cette méthode, vous ne pouvez pas ajouter d’autres signets ni modifier les cartes.
Créer le projet sur Google Cloud
Vous devez d’abord créer une clé API et un projet. Si votre site internet ne dispose pas déjà d’un projet sur Google Cloud Platform, vous pouvez générer un nouveau projet.
Vous serez alors redirigé vers le panneau de contrôle. Cependant, veuillez noter que le nouveau projet ne sera pas disponible après sa création. Cela devra être fait manuellement. Sur le côté gauche de l’en-tête du panneau de contrôle, derrière l’étiquette Google Cloud Platform, il y a un bouton avec le nom du projet actuel.
Cliquez sur ce bouton, sélectionnez le nouveau projet dans la fenêtre pop-up, puis cliquez sur « Ouvrir » pour voir la carte s’afficher.
Activation de l’API Map JavaScript
Allez dans la section « APIs et services » sur Google Cloud Platform. Veuillez assurer toujours que vous travaillez avec le bon projet.
À côté du nom, vous verrez le bouton « Activer les API et les services ».
En cliquant sur ce bouton, vous ouvrirez une page contenant la liste de toutes les API proposées par Google.
En haut de la page, vous pouvez rechercher « Maps JavaScript APIs » où vous verrez tous les services proposés.
Créer une clé API
Ensuite, allez dans l’onglet « Certificats ». Cliquez sur la case « Créer un certificat » et sélectionnez « Clé API » dans le menu qui apparaît.
Intégration avec Google Maps
Si vous souhaitez intégrer Google Maps à votre site Web, vous devez utiliser l’API JavaScript. Les fonctions de base sont faciles à apprendre.
Créer un emplacement des cartes à l’aide de HTML et CSS
Vous devez d’abord créer l’emplacement que vous souhaitez ajouter à la carte.
N’oubliez pas de donner un nom correct à l’emplacement afin que JavaScript puisse le reconnaître. La façon la plus simple de le faire est de lui donner un identifiant.
Ajoutez ensuite cette balise au script afin de pouvoir importer la carte.
Il est indispensable de préciser la taille de la zone de votre carte à l’aide de CSS. Implicite, la hauteur de la carte est de 0 pixel. Cela signifie qu’il n’est pas visible.
Intégration avec Google Maps
Tous les autres éléments nécessitent une bonne connaissance de JavaScript.
Si ce n’est pas le cas, contactez un expert indépendant. L’inscription à ce cours est gratuite. Vous recevrez une aide immédiate.
Conception de couleurs personnalisées.
En plus des formats de carte standard, vous pouvez personnaliser tous les éléments que vous voyez sur la carte en utilisant le bouton « Ajouter une option » en bas du menu.
Après avoir créé le style de carte que vous voulez, cliquez sur « Terminé ». Une fenêtre s’ouvrira pour charger le code JSON. Comprenez-le.
Retournez au code JavaScript. Ajoutez l’élément de style à l’objet map et ajoutez la valeur JSON que vous avez trouvée.
const map égale new google.maps.Map et const Marker égale new google. maps. Marker
Conseils pour ajouter et personnaliser Google Maps sur votre site
Les couleurs peuvent être personnalisées à l’aide de l’assistant. Cela vous fera gagner du temps et vous permettra de vous familiariser rapidement avec les différentes options d’affichage.
Un bon exemple de l’utilisation de Google Maps dans le contenu Web pour montrer votre organisation et votre emplacement aux utilisateurs.
Une clé API Google Maps est nécessaire pour s’afficher correctement votre carte.
Comment puis-je assimiler Google Maps à WordPress ?
Il est possible d’intégrer Google Maps à WordPress sans plugin. Comment le faire manuellement ? Vous n’avez besoin que du « code d’intégration ».