Logo

Comment utiliser l'API Google Carte et HTML 5 pour obtenir la position actuelle de l'utilisateur (le point A) et dessiner la direction vers ( le point B)

Grâce à l’API Google Map et HTML5, vous pouvez obtenir les positions en temps réel et la direction entre deux points. Découvez comment via cet article. Pour suivre ce tutoriel, vous devez avoir des connaissances de base en HTML et Javascript.

Introduction

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 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 Carte

Pour obtenir la clé API de Google Carte, vous avez besoin d’un compte Gmail ou G-Suite. 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 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 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 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 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.
  • 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.

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

Références :

  • Comment obtenir une localisation actuelle en utilisant l’API JavaScript de Google Carte 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é WooCommerce page produit unique ».

Montréal

Notre adresse

9590 Boul Henri-Bourassa E Bureau 108, Montréal-Est, Quebec H1E 2S4, Canada

Abonnez-vous pour recevoir nos nouvelles directement dans votre boîte de réception.