Static route image showing broken (Google Maps Directions API)
Asked Answered
H

1

0

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:

enter image description here

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?

Hf answered 1/10, 2018 at 14:44 Comment(1)
The url you provided works for me in this fiddle (and if I click on it in your question it works). Look for an error message in the javascript console. You may need to use domain restrictions rather than IP restrictions on the key.Orland
H
0

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.

Hf answered 1/10, 2018 at 18:36 Comment(1)

© 2022 - 2024 — McMap. All rights reserved.