Rendu de Google Maps à partir de la réponse à l'API Google Maps

Question

J'essaie de tracer un itinéraire entre un point A et un point B. J'ai suivi le lien ci-dessous :

https://developers.google.com/maps/documentation/directions/intro

Le lien suivant est un exemple de la façon d'obtenir l'itinéraire entre Montréal et Toronto. https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=API_KEY

J'obtiens une réponse JSON lorsque je lance cette URL. J'ai beaucoup vérifié, mais je n'ai pas réussi à trouver comment rendre les détails de cette réponse dans une carte. Quelqu'un peut-il m'aider en m'indiquant la bonne direction ?

J'ai déjà vérifié ce lien : https://developers.google.com/maps/documentation/javascript/examples/directions-simple

J'utilise le paquet alexpechkarev/google-maps, et Laravel pour construire cette solution. J'ai lancé le service de directions à partir du paquet, qui renvoie l'objet JSON qui est similaire à celui donné par le lien dans le guide api de google maps.

Toute aide est appréciée.

Merci.

Answer 1

Voici la recette générale :

Vous devez extraire les coordonnées de l'itinéraire de la réponse JSON. Celles-ci se trouvent dans la réponse à deux niveaux de détail.

1. Les coordonnées explicites des principales intersections le long de l'itinéraire. Vous pouvez les lire en anglais simple et les extraire en tant que membres d'un tableau associatif.

2. En plus de ce qui précède, il y a une chaîne codée contenant beaucoup plus de choses (lat, lon) paires de points entre les intersections. Vous devez les décoder et il existe un algorithme disponible. (J'ai fait une version PHP il y a quelques semaines et le lien est ci-dessous). La raison de ce deuxième tableau est la suivante : Imaginez une longue route de campagne sinueuse sans intersections... ce tableau suivra les courbes de la route, ce qui donnera (lat,lon) paires non trouvées dans 1.

3). Construisez un tableau de coordonnées (à partir de 1 et en incluant 2 si vous avez besoin de détails plus fins).

4) Ensuite, utilisez le code suivant (volé du lien ci-dessous et ajusté un peu : https://developers.google.com/maps/documentation/javascript/examples/polyline-simple :) qui vous montre comment dessiner les lignes sur une carte.

<script>

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        var routeCoordinates = [    // put your array here
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var routePath = new google.maps.Polyline({
          path: routesCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',    // adjust line colour
          strokeOpacity: 1.0,        // adjust line opacity  
          strokeWeight: 2            // adjust line thickness
        });

        routePath.setMap(map);
      }
    </script>

L'exemple du lien Google vous montre comment faire le petit bout de HTML nécessaire, etc.

Maintenant, il faut décoder les points de la polyligne :

Obtenir les latitudes et longitudes des itinéraires à partir de cartes google avec PHP

Dans l'exemple ci-dessus, la fonction decodePolylinePoints($pointsString) renvoie un tableau de (lat,lons) que vous pouvez utiliser pour dessiner l'itinéraire.

Vous devez étudier le JSON pour comprendre le code, et bien qu'il semble désordonné, il est parfaitement logique. Mettez le JSON dans un éditeur comme VSCode et il sera affiché correctement formaté.