Title: Google static maps with directions
Tags: google-maps;google-maps-api-3;google-static-maps
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...

Comment: You would need to use the [Directions API](https://developers.google.com/maps/documentation/directions/start) to get all the coordinates for that path, then pass all those coordinates to the static maps API in the `path` parameter. See https://developers.google.com/maps/documentation/static-maps/intro#Paths

Comment: Example URL here http://www.freakyjolly.com/convert-google-map-into-image-with-markers-and-paths/

Comment: @geocodezip I'm not sure about correct code for my case. Those question was related to what language?

Comment: related question: [google maps static map polyline passing through lakes, river, mountains](http://stackoverflow.com/questions/32255380/google-maps-static-map-polyline-passing-through-lakes-river-mountains)

Here is the accepted answer: You can do it in two steps.


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


E.g. 

https://maps.googleapis.com/maps/api/directions/json?origin=Grodno&amp;destination=Minsk&amp;mode=driving&amp;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&amp;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&amp;key=YOUR_API_KEY```



Comment for this answer: See also for potential snafus with API key restrictions:  https://stackoverflow.com/a/52596973/721073
Comment for this answer: This answer helped me a lot. This tool can help you build a polyline as well: https://developers.google.com/maps/documentation/utilities/polylineutility. 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.
Comment for this answer: And you need to add "enc%3A" before path. http://../staticmap?...&path=enc%3A(YOUR_PATH_WITHOUT_BRACKETS)
Comment for this answer: See also http://stackoverflow.com/questions/9015791/show-a-route-on-a-map/9024450#9024450

Here is another answer: 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('&amp;');

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

Comment for this answer: Thanks. This is exactly what i was looking for.

Here is another answer: 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.'"/&gt;';
```

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&amp;destination=$destination&amp;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, '&amp;');

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

result



Comment for this answer: 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?
Comment for this answer: No wait it's still not drawing the line.  It just shows two markers
Comment for this answer: Any Javascript version of this?

Here is another answer: 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. 


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 4, 'CommentCount': 4, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:07/11/16', 'FavoriteCount': 14.0, 'PostTypeId': 1, 'Tags': '<google-maps><google-maps-api-3><google-static-maps>', 'Title': 'Google static maps with directions', 'ViewCount': 25539, 'id': 38302858, 'user_AboutMe': '<p>Full-Stack Web Developer, learn new technologies each day.</p>\n\n<p>IT Infrastructure Professional with more than 10 years in IT Infrastructure.</p>\n', 'user_AccountId': 6532682.0, 'user_DisplayName': 'Sergey  Fedirko', 'user_Reputation': 609.0, 'user_Views': 67.0, 'user_id': 5053338.0}}