Search code examples
google-maps-static-api

Google's Static Maps not Rendering on Page


I am having a very hard time to make the image generated by Google's Maps renders inside my html image tags in my website.

I am enconding the user data (address, city, state) with php urlencode() and I am using the php htmlentitites() in the final URL. The Google's map image does not render in the page, but if I open img src by the browser source inspector code and click on it, the map renders ok in a new window, when URL is not placed as img src, but as the main URL in the browser.

Look at my code:

<?php
$State = urlencode($data['record']['field_42']);
$City = urlencode($data['record']['field_43']);
$Address = urlencode($data['record']['field_44']);
$Image_map = htmlentities("http://maps.googleapis.com/maps/api/staticmap?markers=$Address,$City,$State&size=570x400&key=&sensor=false&maptype=hybrid");
?>

<img src="<?php echo $Image_map; ?>" alt="Location" height="400" width="570">

Solution

  • In the Quick Example section of the static maps documentation I see that spaces in the query string have to be encoded, e.g. as +.

    Assuming that your $Address variable can contain spaces, you'll need to ensure that you properly encode them before placing them inside your img's src. The difference from the browser bar could be that there the browser takes care of the encoding for you, but inside an html element's attribute it doesn't.