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¢er=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.
<?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¢er=<?=$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.
<?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.