top of page
Writer's pictureFaysal Jaali

Intégration de Google Maps interactif sur Wix


illustration Intégration de Google Maps interactif sur Wix


Looking for the english version - click here


Mettre une carte interactive sur votre site web peut considérablement améliorer l'expérience utilisateur, surtout si votre entreprise nécessite des recherches basées sur la localisation. Dans cet article, nous vous guiderons à travers les étapes pour l'intégration de Google Maps sur Wix à l'aide d'une iFrame avec une fonctionnalité de recherche personnalisée, permettant aux utilisateurs d'entrer une adresse et de trouver des emplacements directement depuis votre site Wix.



Étape 1 : Obtenir une clé API Google Maps

Pour créer une carte personnalisée avec une fonctionnalité de recherche, vous devrez utiliser l'API Google Maps. Commencez par obtenir une clé API.


capture ecran ajouter identifiant google console google maps api

  1. Accédez à la Console Google Cloud Platform.

  2. Cliquez sur le menu déroulant des projets et créez un nouveau projet.

  3. Une fois dans votre projet, allez dans le menu de navigation et sélectionnez APIs & Services > Tableau de bord.

  4. Cliquez sur ACTIVER LES APIS ET SERVICES.

    1. API JavaScript: Permet de charger la carte et de personnaliser ses fonctionnalités (zoom, marqueurs, etc.).

    2. API Geocoding: Convertit les adresses en coordonnées géographiques (latitude et longitude) et vice versa.

  5. Recherchez "API JavaScript de Google Maps" et cliquez dessus.

  6. Cliquez sur Activer.

  7. Dans l'onglet des identifiants, cliquez sur Créer des identifiants et choisissez Clé API.


Remarque : Assurez-vous de sécuriser votre clé API en la restreignant au domaine de votre site web.


Étape 2 : Intégrer l'iFrame de Google Maps sur Wix

Maintenant que vous avez votre clé API, il est temps d'intégrer la carte dans votre site Wix.


screenshot Wix editor ajouter iframe

  1. Connectez-vous à votre compte Wix et sélectionnez le site que vous souhaitez modifier.

  2. Cliquez sur Modifier le site pour entrer dans l'éditeur de site Wix.

  3. Naviguez vers la page où vous souhaitez ajouter Google Maps.

  4. Cliquez sur le bouton Ajouter (+) dans le menu de gauche.

  5. Sélectionnez Intégrer dans le menu déroulant, puis choisissez iFrame HTML.

  6. Un widget HTML apparaîtra sur votre page. Cliquez dessus pour accéder aux paramètres.

  7. Choisissez l'option Entrer le code et collez le code suivant, en remplaçant YOUR_API_KEY par la clé API que vous avez obtenue précédemment :



<html>
<head>
<title>Google Maps</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
let map;
function initMap() {
    const lat = 48.001844; // Latitude du centre choisi
    const lng = -72.474201; // Longitude du centre choisi
    const mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        streetViewControl: false, // Désactiver la vue sur rue
        zoomControl: false, // Désactiver le contrôle de zoom
        fullscreenControl: false, // Désactiver le contrôle plein écran
        scrollwheel: false, // Désactiver le zoom par défilement
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    // Écouter l'événement de glissement
    google.maps.event.addListener(map, 'drag', function() {
        var center = map.getCenter();
        window.parent.postMessage({
            type: 'updateMapCenter',
            lat: center.lat(),
            lng: center.lng()
        }, '*');
    });
}

function updateMapCenter(lat, lng, zoom) {
    const newCenter = new google.maps.LatLng(lat, lng);
    map.setCenter(newCenter);
    map.setZoom(zoom);
}

window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'updateMapCenter') {
        updateMapCenter(event.data.lat, event.data.lng, event.data.zoom);
    }
}, false);
</script>
</head>
<body onload="initMap()" style="margin:0;">
<div id="map" style="width:100%; height:100%;"></div>
</body>
</html>

Ce code initialise une carte Google centrée sur les coordonnées spécifiées et désactive certaines fonctionnalités pour une expérience utilisateur personnalisée.


Étape 3 : Ajouter du code Velo pour capturer l'entrée de l'adresse de l'utilisateur et envoyer les coordonnées à l'iFrame


screenshot add velo and inputs on Wix

  1. Ajouter le champ de saisie d'adresse :

    • Dans l'éditeur Wix, cliquez sur le bouton Ajouter (+) dans la barre d'outils de gauche.

    • Sous la catégorie Entrée, sélectionnez Saisie d'adresse.

    • Placez le champ de saisie d'adresse à l'endroit souhaité sur votre page.


  2. Configurer le champ de saisie d'adresse :

    • Cliquez sur le champ de saisie d'adresse pour accéder à ses paramètres.

    • Assurez-vous que l'ID de l'élément est défini sur #addressInput1.


  3. Ajouter le code Velo :

    • Activez le mode développeur Velo en cliquant sur Dev Mode en haut de l'éditeur et en sélectionnant Activer Velo.

    • Ajoutez le code suivant dans le panneau de code :



$w.onReady(function () {
    $w("#addressInput1").onCustomValidation(async (value, reject) => {
        if (value) {
            let address = await $w("#addressInput1").value;
            let latitude = address.location.latitude;
            let longitude = address.location.longitude;
            $w('#html1').postMessage({
                type: 'updateMapCenter',
                lat: latitude 
			lng: longitude,
                     zoom: 14 // Niveau de zoom souhaité
                 });
             } else {
                 reject("Veuillez entrer une adresse valide.");
             }
         });
     });

Ce code récupère les coordonnées de l'adresse saisie par l'utilisateur et les transmet à l'iFrame pour recentrer la carte sur la localisation correspondante.


Étape 4 : Tester et publier votre site

  1. Prévisualisez votre site pour vérifier la fonctionnalité. Saisissez une adresse dans le champ prévu à cet effet, et la carte devrait automatiquement se centrer sur l'emplacement indiqué.

  2. Si tout fonctionne correctement, cliquez sur Publier dans l'éditeur Wix pour rendre votre site visible par vos visiteurs.


Conclusion: Intégration de Google Maps interactif sur Wix

Grâce à ces étapes, vous pouvez intégrer facilement une carte Google interactive et personnalisée sur votre site Wix. Cela offre une meilleure expérience utilisateur et permet à vos visiteurs de rechercher des emplacements directement depuis votre site.


Vous souhaitez aller plus loin ? Chez CodeMasters, nous sommes experts en intégration Wix et en personnalisation avancée. Que ce soit pour ajouter des fonctionnalités complexes ou optimiser votre site pour vos besoins spécifiques, nous sommes là pour vous aider. De plus, notre équipe parle français et est prête à vous accompagner à chaque étape de votre projet.


Contactez-nous dès aujourd’hui pour donner vie à vos idées !

bottom of page