Introduction

Savez-vous comment utiliser l'API de Google MAP 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 vous demanderiez comment y parvenir, ce petit tutoriel a pour but 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 obtenir la latitude et la longitude. Je vous fournirai le code JavaScript pour obtenir la position actuelle de l'utilisateur et dessiner la direction.

1- Obtenir la clé API Google Map

Pour obtenir la clé API de Google MAP, vous avez besoin d'un compte Gmail ou Gsuite. Si vous n'avez pas de compte, vous pouvez en créer un ; il est gratuit. Une fois que vous avez créé votre compte Gmail ou Gsuite, 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 essayer gratuitement 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.Google API

Créer une clé API Google map

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 alors, 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.
  • Et enfin, sur l'écran de la bibliothèque d'API, vous recherchez Google Map 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.API Library

Obtenez votre clé API pour votre projet

API Key

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 que quelqu'un 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 Restrictions 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 permet de 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 MAP. Par conséquent, dans l'option "restreindre la clé", nous allons sélectionner.restrict API

2- Utilisez le Javascript ci-dessous pour obtenir l'emplacement et la direction actuels

<?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 obtenir la valeur du formulaire à la ligne 73.

Références :

  • Comment obtenir une localisation actuelle en utilisant l'API Javascript de Google Map par phppot.
  • Documentation de la plate-forme Google Maps.
Merci de votre lecture, vous pouvez également être intéressé par l'article "Modifier le bouton Ajouter au panier avec un lien personnalisé Woo Commerce page produit unique".