Comment ajouter Google Maps sur MonSiteWeb ?

Procédure

Connexion au panel développeur de Google

Pour commencer connectez-vous à votre compte Google via ce lien : https://accounts.google.com/login

puis rendez-vous dans cette rubrique  : https://developers.google.com/maps/documentation/javascript/


Génération d'une clé API

Cliquez ensuite sur le bouton "GET A KEY" puis "CONTINUE"


Comment ajouter Google Maps sur MonSiteWeb ?


Rendez-vous dans la rubrique "Identifiants" puis cliquez sur "Créer des identifiants" puis "Clé API"


Comment ajouter Google Maps sur MonSiteWeb ?


sur la fênetre pop-up qui s'ouvrira cliquez sur "Clé Navigateur".


Comment ajouter Google Maps sur MonSiteWeb ?


Cliquez ensuite sur "Créer" pour généré une clé API


Comment ajouter Google Maps sur MonSiteWeb ?


une pop-up s'ouvrira avec la clé générée.

Elle sera du type : AIzaSyAitG7qkagEhKLDKoqmxMgbE8xhJTGyKKA

Copiez cette clé dans un block note, car elle nous sera utile par la suite.


Comment ajouter Google Maps sur MonSiteWeb ?


Ajout du module script sur MonSiteWeb

Connectez-vous à MonSiteWeb et cliquez sur l'onglet "Modules", séléctionnez "Script" puis déplacez-le sur la page ou vous désirez qu'il soit visible.


Comment ajouter Google Maps sur MonSiteWeb ?


Exemple de code HTML

L'exemple de code suivant pourra être ajouté dans le module script que vous avez mis en place, dans le bloc prévu à cet effet.

<html>
<head>
    <style>
    #map {
        width: 100%;
        height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
    function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 44.540, lng: -78.546},
            zoom: 8
        });
    }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

 

Notez cet article

3 / 5
2 avis


Vous avez noté 0 étoile(s)

Cet article vous a-t-il été utile ?

Merci !

N'hésitez pas à commenter nos pages afin de nous aider à les améliorer si besoin.

Vous n'avez pas trouvé votre réponse ?

Envoyez nous un message afin d'avoir une réponse rapidement



comments powered by Disqus
Top