Static route image showing broken (Google Maps Directions API)

Question

I'm attempting to retrieve a static image of a route from Google Maps directions API.

// addresses
$from_address = "Mobile,AL"
$to_address = "Athens,GA"

// build static image url
$url_route_json = "https://maps.googleapis.com/maps/api/directions/json?origin=$from_address&destination=$to_address&mode=driving&key=$goog_map_dist_api_key";

// replace any spaces in the route address with + signs
$url_route_json = str_replace(' ', '+', $url_route_json);

// get the json response
$resp_json = file_get_contents($url_route_json);

// decode the json
$jsondata = json_decode($resp_json, true);

// URL encode overview_polyline
$overview_polyline = urlencode($jsondata['routes'][0]['overview_polyline']['points']);

// build image URL
$url_route_img = "https://maps.googleapis.com/maps/api/staticmap?size=600x400&path=enc%3A$overview_polyline&key=$goog_map_dist_api_key";

url_route_img becomes:

https://maps.googleapis.com/maps/api/staticmap?size=600x400&path=enc:wknnEvj%7B%7DN%7CA%60DYRgDxBZx%40hArC%60A%7CBtEtKzEfLrBhF%7E%40dD%7CGtRJ%5CrD_Bh%40K%60%40FjAbBVZJJXk%40d%40%7D%40Zm%40f%40y%40%7C%40eAtK%7BHtGoEv%40i%40HDP%40pAWvABjGn%40%7CGp%40%60F%60%40zMrAfEf%40pCf%40lEzAhCrAtMtIvBnAzB%60A%7EBt%40%7EJzBtOpDbFnAdK%60ClEz%40nOnDlCh%40bDZhDB%7CCSbCc%40j%40Oj%40N%7EEr%40jA%60%40%7E%40x%40%60LzM%60C%7CBn%40RfBN%7CBJhFj%40vD%60%40jB%5ChBbAfB%7EBpFjTpBlH%60%40%7C%40t%40%7E%40vCtBl%40j%40FXBTB%60%40iD%7EOwJdd%40%7BLxj%40sB%7CHkBvFoC%60HoC%7EFwX%7Ej%40gD%60IoCfIqCrKsBpJwNhq%40mOds%40%7DYxtAmM%60m%40iArFgBpK_BnMiCdYaFxh%40oJ%7EcAsGpr%40cC%60XsCj%5By%40bQQnIChJWnx%40e%40riB%7D%40faDIxXU%7CE%7B%40rGaA%7EDsAxDcBjDuB%7ECcCjCiYhXgMlNeFvGmChDmCnFuBpG%7DAtHkA%60K%5B%60HEdDFjFNrDf%40nFt%40dF%7EAhH%7EF%7CUv%40%7EE%5C%7EDb%40zWLvJRvNj%40bOhA%7CNpAxLfBpOlDr%5BzEfc%40lQn_BtFlg%40%60BrMb%40xBr%40dCfArCjGxJxEvHjG%60L%60NzWlZzk%40lEhJj%40zAnB%7EFbBbHxChO%7EKtj%40fAdGfApKb%40vIHlHIbGoJlnB%7BPtiDyCrj%40a%40jFcAdIgArHy%40vFSbCB%7CEPvBf%40hC%7C%40hCrCfFfBbDfClFfB%7EEdEnMzOzg%40lIfUjIbTfHfRnEjM%40%5C%3FXCTM%5EgAp%40aC%7CAwFhDeHhEgUdN_DlBeCpBgD%7CD%7BBjDyEpI%7BDdFiArAaL%7CLmFjGoKfNwMbRiCrCyCjCcGvD%7DHfEqWrNyXtPgJvFqB%7E%40%7BBb%40yBBmAMmEaAkA%3FmAPs%40RuBnAoC%60BgDxAeB%5EoBJa%40%40iEm%40cGwAoGcAuBOuBBsBZuAd%40yA%60AuAzAy%40jAIf%40_AdCiB%60FmE%7ELq%40%60DY%60DAbAHfERtHEbBk%40nDuAjDwBjCuBxByAzBq%40bAsAbEqAbFmBfJo%40bCuAzCmA%60BgB%7EA%7DDtBgLrFoDfBoBnAoC%7EByDpF%7DDlGwGjKeJbOoHrNyC%7CDkGnG%7DAjCw%40fBwBnGqAbCq%40x%40wAhAsFzDwBxB%7BA%60CcGhKs%40%7EAgAnDuAjGcAlCaAbBsCfD%7DN%7EPwH%60JaExFiEbGyAzAwCtBkAj%40qDpAmLbEwBdAeHdEcIbFcJ%7CFeCdBkAlAgFfJq%40nAwBpC%7DBfBoQjKaMxHmBlBqAvBk%40%7CAaAtEyBjLiG%7E%60%40kA%7CGcAjEaBbGiWh_AgJx%5Cs%40lCeAjFo%40tE%5DhDOfCUd%40c%40L&key=AIzaSyBUjR5xuzBIA_BGGkxnUeHFvLRslstJOU0

That goes in an img tag like so:

<img src="$url_route_img">

Included in an img tag, I see this:

My key is only valid for our server's IP, which is entered in the API key config screen under Restrictions. I've also specifically allowed the Directions and Static Maps APIs on the same key config (the directions part works fine).

What am I missing to get a static image of a route to appear?

Answer 1

Static Maps API requires HTTP based restriction, while Directions was looking for IP based restriction.

I created a second API key specifically for Static Maps and configured using HTTP restriction.

Image now loads perfectly.