Ajouter l’API Google Maps à votre site web en 2 minutes

Bienvenue sur cet article :)!

Aujourd’hui, grâce à cet article tu apprendras à utiliser l'API Google Maps. Une API est une interface de programmation d’application (Application Programming Interface). Celui-ci en plus de ses fonctions très sophistiquées permet d’ajouter une carte simple Google avec un marqueur à une page Web. Il convient aux personnes ayant des connaissances débutantes ou intermédiaires en HTML et CSS, et un peu de connaissance de JavaScript.

Mettons fin au bavardage et pratiquons !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>DEMO</title>
</head>
<body>
    
</body>

A partir de ce code minimal nous allons faire grande chose en ajoutant un élément div dans la balise body.

<body>
    <div id="map"></div>
</body>

Une fois cette partie html terminée, passons à la mise en forme (css). Dans un fichier séparé qui sera enregistré sous style.css dans le même dossier que le fichier html ci-dessus.

#map{
    width : 700px;
    height : 200px;
    border-radius: 7px;
}

Passons enfin à l’implémentation de l’API grâce au javascript cette fois dans notre fichier index.html

// Cette ligne de code peut être insérée dans le head ou le body du code html
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" defer></script>

En dessous du <div id="map"> < /div> insérer le bloc de code suivant

<script>
        function initMap(){
// On definit le lieu : Ndotre avec ses parametres Latitude et Longitude
            let Ndotre = {lat: 5.443370, lng: -4.069498};

// On definit un nouvel objet de la classe google.maps.Map
            let map = new google.maps.Map(
// On récupère l'élément map grace à l'ID 
                document.getElementById('map'),{zoom:10, center :Ndotre}
            );
// On definit le marqueur de lieu
            let mark = new google.maps.Marker({position:Ndotre, map:map})
        };
    </script>

Enregistrer respectivement les fichiers html et css puis ouvrir index.html dans un navigateur. NB: Assurez-vous d’avoir une connexion internet pour voir le résultat.

Merci et à bientôt ! Et surtout commentez si vous ne comprenez pas un truc.

Intelli Digital