If you have messed with the Google Maps API, you know that the JavaScript and API keys can be a real headache. Yes, there are very complex implementations that you can use, but what if you want...just a map? If you want just a map with no dynamic interface, Google Static Maps is just for you. I will show how easy it is to use, and then spice it up with some PHP-powered enhancements.


Check out how easy this is. If I want a map centered at a my zip code, I can create a JPEG image for that area with this link:

http://maps.google.com/maps/api/staticmap?sensor=false&center=46311&zoom=14&size=600x400

And it generates this:

No API keys, no JavaScript, and the URL is even short enough to not have to wrap on the page. As long as you don’t need the typical panning and zooming features, this is the best option. There are a limited but practical set of features including map types (satellite, hybrid, regular, etc), markers, lines, shapes, custom icons, and all in different image formats. View the Google Static Maps API page for the full details.

Making it a Little More Dynamic

This is a site on PHP. I can’t show you how to create static maps and leave it at that. There are several good reasons why we might want to dynamically generate that URL.

Simple “You Are Here” Map

For starters, how about a map that shows your local area based on your IP address geolocation? This sample below uses the code from a previous article that showed how to determine the geographic location from any IP address.

Run This Example

<?php

/* replace with your own DB connection code */
require('../includes/database.php');
$db = db_connect();

/* get the IP address and make sure it is an unsigned integer */
$ip = sprintf('%u', ip2long($_SERVER['REMOTE_ADDR']));

/* fetch the location id and info */
$query = "SELECT CityLocation.* FROM CityBlocks INNER JOIN CityLocation ON CityLocation.locId = CityBlocks.locId WHERE $ip BETWEEN CityBlocks.startIpNum AND CityBlocks.endIpNum LIMIT 1";
$result = mysql_query($query, $db) or die(mysql_error());
$location = mysql_fetch_assoc($result);

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Static Map for Your Location</title>
</head>
<body>
<h2>Static map for your town:</h2>
<p>If you are placed in the middle of an ocean, your IP address is probably not in the database.  The blue marker is your specific IP location (probably not exact).</p>
<img src="http://maps.google.com/maps/api/staticmap?sensor=false&center=<?=$location['postalCode']?>&markers=color:blue|<?=$location['latitude']?>,<?=$location['longitude']?>&zoom=13&size=600x400" />

<h2>Details from IP GeoLocation:</h2>
<pre><?php var_dump($location); ?></pre>
</body>
</html>

Show Your Position With Other Objects

We already know how to find a list of the closest items in our area from this post: Locate the Nearest Radar Station and Display Radar Images. Now, let’s apply it to generating a Static Google Map. This uses the “Implicit Positioning” feature where you can just list a bunch of points, and the map will automatically create a zoom level and center based on the created points.

Run This Example

<?php

/* replace with your own DB connection code */
require('../includes/database.php');
$db = db_connect();

/* get the IP address and make sure it is an unsigned integer */
$ip = sprintf('%u', ip2long($_SERVER['REMOTE_ADDR']));

/* fetch the location id */
$query = "SELECT locId FROM CityBlocks 
			WHERE $ip BETWEEN startIpNum AND endIpNum LIMIT 1";
$result = mysql_query($query, $db) or die(mysql_error());
$row = mysql_fetch_assoc($result);

/* now fetch the location */
$locId = $row['locId'];
$query = "SELECT * FROM CityLocation WHERE locId = $locId LIMIT 1";
$result = mysql_query($query, $db) or die(mysql_error());
$location = mysql_fetch_assoc($result);

/* offset the coordinates by 3, and find the closest station */
$lat = $location['latitude'] + 3;
$lon = $location['longitude'] - 3;
$query = "SELECT *, SQRT(POW(69.1 * (lat - $lat), 2) + 
			POW(69.1 * ($lon - lon) * COS(lat / 57.3 ), 2 )) AS distance 
			FROM RadarSites ORDER BY distance ASC LIMIT 5";
$result = mysql_query($query, $db) or die(mysql_error());

$qs = '';
for ($i = 0; $i < mysql_num_rows($result); $i++)
{
	$row = mysql_fetch_assoc($result);
	$rows[] = $row;
	
	/* remember - we want roughly the center of the radar coverage, not the top-left corner */
	$lat = $row['lat'] - 3;
	$lon = $row['lon'] + 3;
	
	/* forming the query string for the image URL */
	$markers[] = '&markers=color:blue|label:' . $i . '|' . $lat . ',' . $lon;
}

$markers = implode('', $markers);

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Static Map for Your Location</title>
</head>
<body>
<h2>5 Closest Radar Sites to You</h2>
<p>Red marker is you.</p>
<img src="http://maps.google.com/maps/api/staticmap?sensor=false&maptype=roadmap<?=$markers?>&markers=color:red|<?=$location['latitude']?>,<?=$location['longitude']?>&size=600x400" />

<h2>Details from IP GeoLocation:</h2>
<pre><?php var_dump($location); ?></pre>

<h2>Radar Sites:</h2>
<pre><?php var_dump($rows); ?></pre>
</body>
</html>

These examples are meant to get your creative juices flowing. Have some other cool concepts for Google Static Maps? Post them below.


3 Responses to “Making Google Static Maps a Little More Dynamic with PHP”

Leave a Reply





Wordpress doesn't like it when you post PHP code. Go save your code at pastebin, and post the link here.

About the Author

Andrew has been coding PHP applications since 2006, and has plenty of experience with PHP, MySQL, and Apache. He prefers Ubuntu Linux on his desktop and has plenty of experience at managing CentOS web servers. He is the owner of Wells IT Solutions LLC, and develops PHP applications full time for anyone that needs it as well as does desktop computer support locally in the local area. He spends most of his free time exploring new programming concepts and posting on The Webmaster Forums.