Google static maps with directions

Question

I have in my project list of generated places with mini maps. There should be 2 points on the map and colored road direction between this two points.

it should looks somehow like this:

This should be static image, because there will be many such pictures with different directions on the page. But as I see, Google Static map didn't allow to draw such image. There can be only direct line between two points, like this:

But I need direction on it...

I decided to use static map, because in my web application I receive coordinates of those 2 points, and it's easy to put it as variables in my PHP template if I use static maps. But is it possible to receive direction as static image in same way?

I have found few solution with JavaScript API, but didn't find how to draw static image as I need...

Afore

You would need to use the Directions API to get all the coordinates for that path, then pass all those coordinates to the static maps API in the path parameter. See developers.google.com/maps/documentation/static-maps/… – Mellifluous

related question: google maps static map polyline passing through lakes, river, mountains – Superintendency

@Superintendency I'm not sure about correct code for my case. Those question was related to what language? – Afore

Example URL here freakyjolly.com/… – Puseyism

Answer 1

You can do it in two steps.

1. Execute directions request from the PHP code to get the encoded polyline
2. Use encoded polyline from step 1 with static maps

E.g.

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

This will return encoded polyline in routes[0]->overview_polyline->points

Now use the polyline in static map:

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

Agenda

See also https://mcmap.net/q/505284/-show-a-route-on-a-map/… – Beuthen

And you need to add "enc%3A" before path. http://../staticmap?...&path=enc%3A(YOUR_PATH_WITHOUT_BRACKETS) – Judenberg

See also for potential snafus with API key restrictions: https://mcmap.net/q/505285/-static-route-image-showing-broken-google-maps-directions-api – Taboret

This answer helped me a lot. This tool can help you build a polyline as well: developers.google.com/maps/documentation/utilities/…. It takes a bit to get used to it. You can also use it to decode an existing polyline. This was helpful for debugging purposes. – Warenne

Answer 2

I have created a small utility function for my website that does exactly what you need : https://github.com/bdupiol/php-google-static-map-directions

Given an origin, a destination and a array of waypoints (if needed), it gives you a clean Google Static Maps URL with driving path rendered between those points, and sets proper markers.

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";
}

result

Trenttrento

When I tried this with two different locations, I see a map, with no line meeting the places. My markers say A and C, which is confusing because I don't know who has B but I've only put in two locations. Could it be because I'm using the address not longditude and Lat? – Spermous

No wait it's still not drawing the line. It just shows two markers – Spermous

Any Javascript version of this? – Naldo

Looks like this is not up to date and won't display an image anymore – Fluoridation

Answer 3

I took Bedu33 logic in PHP and write it in javascript to generate the Google Maps Static Image in case someone needs it like I did. This code uses the response from the Directions API

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);

Brigand

Thanks. This is exactly what i was looking for. – Incalculable

Answer 4

I've been doing this today, using the overview_polyline which is returned from the distance matrix, however in some cases the polyline isn't plotted on the static map when adding it to the map URL but the same one works on a dynamic map. with googles new pricing coming in we've had to make changes as our current yearly payment is to increase by other 1500%. the bonus of the static map is that you can pass postcode/zip and full addresses. you can also pass in variables which makes things easier.

Soporific