Vous pouvez combiner L’API Google Carte et HTML 5 pour faire le calcul de la distance entre deux points. Savez-vous comment utiliser l’API de Google Carte pour récupérer un lieu d’utilisation actuel ? Si oui, pouvez-vous également tracer une direction entre la position d’un utilisateur actuel et un autre lieu ? Au cas où vous souhaiteriez savoir comment y parvenir, ce petit tutoriel tend à de vous aider à y parvenir. Après avoir lu cet article, vous serez en mesure de créer et d’obtenir une clé Google API. De plus, vous comprendrez comment l’utiliser dans votre projet pour apporter la latitude et la longitude. Je vous fournirai le code JavaScript pour acquérir la position actuelle de l’utilisateur et dessiner la direction.

1- Acquérir la clé API Google Carte

Pour acquérir la clé API de Google Carte, vous avez besoin d’un compte Gmail ou G-Suite. Si vous ne possédez pas de compte, vous pouvez en créer un ; il est gratuit. Une fois que vous avez créé votre compte Gmail ou G-Suite, suivez les étapes suivantes pour obtenir votre clé API :

Visitez le site https://console.cloud.google.com/ et connectez-vous.
La première fois, vous devrez activer votre compte et ajouter un mode de paiement.
Vous pouvez soit cliquer sur Activer, soit gratuitement essayer pour commencer.
Un formulaire apparaîtra dans lequel vous fournirez quelques détails sur votre entreprise.

Remarque : l’API Google n’est pas un service gratuit, mais d’après mon expérience, à moins que vous ne fassiez trop de demandes ou d’appels à l’API, vous n’aurez peut-être jamais à payer pour le service. Vous pouvez lire les conditions générales de Google pour plus d’informations.

Créer une clé API Google carte

Si vous réussissez à activer votre compte, vous aurez alors accès au tableau de bord de la plate-forme Google Cloud, puis vous ferez ce qui suit :

Cliquez sur le menu sandwich en haut à gauche (à gauche du logo).
Une liste s’ouvrira ainsi, et vous pourrez cliquer sur API et services.
En haut à droite du logo, vous verrez une liste déroulante.
Si vous cliquez sur la liste déroulante, une fenêtre s’ouvrira et vous pourrez cliquer sur le bouton « Nouveau projet » pour créer votre projet.
Ensuite, vous devrez fournir un nom de projet, sélectionner un compte de facturation et cliquer sur « Créer ».
Après avoir créé votre nouveau projet, par défaut, il ne contient pas d’API, et vous devrez cliquer sur la bibliothèque à votre gauche pour ajouter des API.
Enfin, sur l’écran de la bibliothèque d’API, vous recherchez Google Carte et activez les API.

Il existe plus de 18 API, mais nous n’avons besoin que de l’API de direction, car nous utiliserons les fonctionnalités de HTML 5 pour détecter la localisation actuelle.

Obtenez votre clé API pour votre projet

Après avoir sélectionné l’API requise, vous devrez :

Cliquer sur « créer des clés ».
Sélectionner la clé API (l’action « créer des clés» générera une clé API que vous pourrez utiliser dans l’étape suivante).
Ensuite, sélectionnez « restreindre la clé» (pour éviter qu’une personne ne la copie et ne l’utilise sur son projet).
Vous pouvez soit restreindre avec l’IP ou l’URL.

Si votre API est destinée aux applications mobiles, il existe une option permettant de restreindre les applications Android ou iOS.

Dans l’option Restriction API, vous pouvez soit laisser l’option Ne pas restreindre, soit restreindre la clé. L’option « Ne pas restreindre» vous permettra, dans certains cas, d’utiliser la même API sur différents types d’applications. L’option « Restriction » ne vous autorise à choisir que les API pour le type d’application que vous créez. Par exemple, dans notre cas, nous avons besoin des clés API pour le géocodage et la direction de Google Carte. Par conséquent, dans l’option « restreindre la clé », nous allons sélectionner.

2- Utilisez le JavaScript ci-dessous pour obtenir l’emplacement et la direction actuel


<?php 
define("API_KEY","your google map api goes here") ?>
<!DOCTYPE html>
<html>
<head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 400px;
        width: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
 
    </style> 
</head>
<body>

    <h1>My First Google Map</h1>

    <div id="map"></div>
<input type="hidden" value="120 Rue Louise, Longueuil, QC J4J 2S9" id="end" />
<script>

      function initMap() {

              // Try HTML5 geolocation.
     if (navigator.geolocation) {
            
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
                };

                window.pos = pos; 


        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
      //  ourOrigin = new google.maps.LatLng(pos.lat, pos.lng);
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: pos.lat, lng: pos.lng}
        });
        directionsDisplay.setMap(map);

          calculateAndDisplayRoute(directionsService, directionsDisplay);


            });
            } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
            }



        
       }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {

          console.log("Testing : "+pos);

        directionsService.route({
          origin:  new google.maps.LatLng(pos.lat, pos.lng),
          destination: document.getElementById('end').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap">
    </script>



</body>

</html>

Explication du code :

Remplacez votre clé API dans la ligne de code 2.

Ligne 27 : Utilisez un formulaire pour ajouter le lieu de destination et l’utilisation (Voir : value=»120 Rue Louise, Longueuil, QC J4J 2S9″). Vous pouvez modifier l’adresse comme vous le souhaitez.

Lignes 35 à 41 : Nous obtenons l’utilisation actuelle des informations — Latitude et longitude.

Nous utilisons l’identifiant du formulaire à la ligne 27 pour acquérir la valeur du formulaire à la ligne 73.

Références :

Comment apporter une localisation actuelle grâce à l’API JavaScript de Google Carte
Documentation de la plate-forme Google Maps.

Je vous remercie pour votre lecture, vous pouvez également être intéressé par l’article « Modifier le bouton Ajouter au panier avec un lien personnalisé WooCommerce page produit unique ».

Gilblas Ngunte Possi

Fondateur et Développeur Full-Stack chez Prositeweb.

Ma maîtrise des outils modernes, combinée à un sens d’analyse approfondi des technologies de l’information, me permet d’offrir un accompagnement de qualité dans la conception et la mise en place de vos solutions web.