web-dev-qa-db-fra.com

Cartes statiques Google avec directions

J'ai dans mon projet la liste des lieux générés avec des mini cartes. Il devrait y avoir 2 points sur la carte et la direction de la route colorée entre ces deux points.

cela devrait ressembler à ceci:

expected map picture

Cela devrait être une image statique, car il y aura beaucoup de ces images avec des directions différentes sur la page. Mais comme je le vois, la carte statique de Google ne permettait pas de dessiner une telle image. Il ne peut y avoir qu'une ligne directe entre deux points, comme ceci:

enter image description here

Mais j'ai besoin de directives là-dessus ...

J'ai décidé d'utiliser une carte statique, car dans mon application Web, je reçois les coordonnées de ces 2 points, et il est facile de les mettre en tant que variables dans mon modèle PHP si j'utilise des cartes statiques. Mais est-ce possible de recevoir la direction sous forme d'image statique de la même manière?

J'ai trouvé peu de solutions avec l'API JavaScript, mais je n'ai pas trouvé comment dessiner une image statique comme j'en avais besoin ...

google-mapsgoogle-maps-api-3google-static-maps
18
Sergey Fedirko

Vous pouvez le faire en deux étapes.

  1. Exécuter la demande de directions depuis le code PHP pour obtenir la polyligne encodée
  2. Utiliser la polyligne codée de l'étape 1 avec des cartes statiques

Par exemple.

https://maps.googleapis.com/maps/api/directions/json?origin=Grodno&destination=Minsk&mode=driving&key=YOUR_API_KEY

Cela retournera une polyligne encodée dans les routes [0] -> overview_polyline-> points

Utilisez maintenant la polyligne dans la carte statique:

https://maps.googleapis.com/maps/api/staticmap?size=600x400&path=enc%3AohqfIc_jpCkE%7DCx%40mJdDa%5BbD%7BM%7D%40e%40_MgKiQuVOoFlF%7DVnCnBn%40aDlDkN%7DDwEt%40%7DM%7DB_TjBy%7C%40lEgr%40lMa%60BhSi%7C%40%7COmuAxb%40k%7BGh%5E_%7BFjRor%40%7CaAq%7DC~iAomDle%40i%7BA~d%40ktBbp%40%7DqCvoA%7DjHpm%40uuDzH%7Dm%40sAg%7DB%60Bgy%40%7CHkv%40tTsxAtCgl%40aBoeAwKwaAqG%7B%5CeBc_%40p%40aZx%60%40gcGpNg%7CBGmWa%5CgpFyZolF%7BFgcDyPy%7CEoK_%7BAwm%40%7BqFqZaiBoNsqCuNq%7BHk%60%40crG%7B%5DqkBul%40guC%7BJ%7D%5DaNo%7B%40waA%7DmFsLc_%40_V%7Dh%40icAopBcd%40i_A_w%40mlBwbAiiBmv%40ajDozBibKsZ%7DvAkLm%5DysAk%7DCyr%40i%60BqUkp%40mj%40uoBex%40koAk_E_hG%7B%60Ac%7DAwp%40soAyk%40ogAml%40%7Bg%40qKsNeJw%5DeuA%7D%60Fkm%40czBmK%7Bg%40wCed%40b%40_e%40dT%7BgCzx%40csJrc%40ejFtGi%60CnB_pFhCa%60Gw%40%7Du%40wFwaAmP%7BoA%7Dj%40etBsRm_AiGos%40aCyy%40Lic%40tFohA~NeoCvC_%7CAWm~%40gb%40w~DuLex%40mUk_Ae_%40o_Aol%40qmAgv%40_%7DAaf%40qhAkMcl%40mHwn%40iCuq%40Nqi%40pF%7D%7CE~CyiDmFkgAoUedAcb%40ku%40ma%40cl%40mUko%40sLwr%40mg%40awIoA_aApDe~%40dKytAfw%40kyFtCib%40%7DA%7Bj%40kd%40usBcRgx%40uFwb%40%7BCulAjJmbC~CumAuGwlA_%5Du_C_PqyB%7BI%7DiAwKik%40%7DUcr%40ya%40up%40%7DkB%7DoCoQ%7Da%40aMyf%40an%40wjEimBuwKiYybC%7DLuyBoJ%7DhBuMieAwd%40i%7BB%7B~%40g%60D_Si%5Dsi%40%7Bk%40cPeSuH_T%7DNct%40kNcmC_Gyr%40mq%40_~AkmA%7DkCksByrE_N%7Bc%40oAcs%40%60J%7Bi%40t%7DByaHxNqt%40tGgxA%7CJ%7BkGeJ_aDsQi_HmFwuAmI%7BdA_XijByFgv%40%7DAiwBxDocAdM%7BlAtSmcAfUmaAptAmbGh~AcvGbwBc%7DHff%40shB~Isp%40nQu%7DB%60UsuCbBok%40l%40%7DzAhIwbA~OuaAnYwp%40rYwe%40%7CNke%40zc%40%7BhBrOwRdo%40sf%40xNaTb_%40uy%40ta%40k~%40xTap%40hl%40uiCre%40unHlIi~AlFsc%40rEkk%40aAce%40mL%7DlAwPcyB_GohBzDsqAtMqtA~h%40weDtFkd%40Bi%60%40_XwfEdAag%40dEkM%60%40zAqApJef%40%7BP_o%40sYys%40ai%40yf%40_j%40y_%40oi%40mVi%5EmFqSwAiPtDuQbc%40_nAtZyaAlEkc%40r%40eq%40%7CAo%5BrTwcAtVuz%40vQ%7Dd%40%7CPmb%40xT%7B%5CzZyd%40jG%7BRzL%7Dh%40jr%40ov%40rFiImFqPiD%7BJ&key=YOUR_API_KEY

28
xomena

J'ai créé une petite fonction utilitaire pour mon site Web qui fait exactement ce dont vous avez besoin: https://github.com/bdupiol/php-google-static-map-directions

Étant donné une origine, une destination et un tableau de points de cheminement (si nécessaire), il vous donne une URL Google Static Maps propre avec un chemin de conduite rendu entre ces points et définit des marqueurs appropriés.

index.php 

<?php

include "static-map-direction.php";

$Origin = "45.291002,-0.868131";
$destination = "44.683159,-0.405704";
$waypoints = array(
    "44.8765065,-0.4444849",
    "44.8843778,-0.1368667"
  );

$map_url = getStaticGmapURLForDirection($Origin, $destination, $waypoints);

echo '<img src="'.$map_url.'"/>';

static-map-direction.php 

<?php

function getStaticGmapURLForDirection($Origin, $destination, $waypoints, $size = "500x500") {
    $markers = array();
    $waypoints_labels = array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K");
    $waypoints_label_iter = 0;

    $markers[] = "markers=color:green" . urlencode("|") . "label:" . urlencode($waypoints_labels[$waypoints_label_iter++] . '|' . $Origin);
    foreach ($waypoints as $waypoint) {
        $markers[] = "markers=color:blue" . urlencode("|") . "label:" . urlencode($waypoints_labels[$waypoints_label_iter++] . '|' . $waypoint);
    }
    $markers[] = "markers=color:red" . urlencode("|") . "label:" . urlencode($waypoints_labels[$waypoints_label_iter] . '|' . $destination);

    $url = "https://maps.googleapis.com/maps/api/directions/json?origin=$Origin&destination=$destination&waypoints=" . implode($waypoints, '|');
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POST, false);
    $result = curl_exec($ch);
    curl_close($ch);
    $googleDirection = json_decode($result, true);

    $polyline = urlencode($googleDirection['routes'][0]['overview_polyline']['points']);
    $markers = implode($markers, '&');

    return "https://maps.googleapis.com/maps/api/staticmap?size=$size&maptype=roadmap&path=enc:$polyline&$markers";
}

résultat

12
Bedu33

J'ai pris la logique Bedu33 en PHP et je l'ai écrite en javascript pour générer l'image statique de Google Maps au cas où quelqu'un en aurait besoin comme moi. Ce code utilise la réponse de API Directions

var request = directionsDisplay.directions.request;
var start = request.Origin.lat() + ',' + request.Origin.lng();
var end = request.destination.lat() + ',' + request.destination.lng();
var path = directionsDisplay.directions.routes[0].overview_polyline;
var markers = [];           
var waypoints_labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];
var waypoints_label_iter = 0;   
markers.Push("markers=color:green|label:" + waypoints_labels[waypoints_label_iter] + '|' + start);

for(var i=0;i<request.waypoints.length;i++){
    //I have waypoints that are not stopovers I dont want to display them
    if(request.waypoints[i].stopover==true){
        markers.Push("markers=color:blue|label:" + waypoints_labels[++waypoints_label_iter] + '|' + request.waypoints[i].location.lat() + "," +request.waypoints[i].location.lng());
    }           
}

markers.Push("markers=color:red|label:" + waypoints_labels[++waypoints_label_iter] + '|' + end);

markers = markers.join('&');

alert("https://maps.googleapis.com/maps/api/staticmap?size=1000x1000&maptype=roadmap&path=enc:" + path + "&" + markers);
8
Natalia Traficante

Je l'ai fait aujourd'hui, en utilisant la vue d'ensemble_polyline qui est renvoyée par la matrice de distance, mais dans certains cas, la polyligne n'est pas tracée sur la carte statique lors de l'ajout à l'URL de la carte, mais la même fonctionne sur une carte dynamique. Avec la nouvelle tarification de Google, nous avons dû apporter des modifications, car notre paiement annuel actuel devrait augmenter de 1500%. le bonus de la carte statique est que vous pouvez transmettre le code postal/Zip et les adresses complètes. vous pouvez également passer des variables, ce qui facilite les choses.

1
Nick Coleby