Create Google Static Area Maps with Latitude & Longitude Boundaries

Published February 10, 2010 • 1 Comment • 2 Delicious Bookmarks

This tutorial shows you how to use the little known Google Static Maps feature to outline a specific boundary such a zip code or a city. It requires that you have your own Google Maps API. Above is the output image generated by the code below.

This is the PHP code that is needed. The tricky part is finding the latitude and longitude points of the particular area you want to draw. I got my data for BuyAPittsburghHome.com systematically from PushPin’s API.

The PHP

# Google Maps API Key (replace with your key)
$apikey="ABQIAAAA_6h1iP7xkNWbJaJtdQExbxQoasim_Ec9007jwQbCPHO_oeeE-RTam6RjbglJrcjrbo6lqh5Wmpn8uQ";

# $latlon is a variable pulled from MySQL that stores all the latitude and longitude points of a particular area.
# In your case, you would probably have a database connection followed by sql that pulls the respective data needed.
# Since I cannot tell you where/how to pull the data from your own database, I am just going to set it here manually.
$latlon = 'a:21:{i:0;a:2:{i:0;s:8:"-80.0614";i:1;s:7:"40.5059";}i:1;a:2:{i:0;s:8:"-80.0504";i:1;s:7:"40.5123";}i:2;a:2:{i:0;s:8:"-80.0453";i:1;s:7:"40.5062";}i:3;a:2:{i:0;s:8:"-80.0336";i:1;s:7:"40.5066";}i:4;a:2:{i:0;s:8:"-80.0337";i:1;s:7:"40.5023";}i:5;a:2:{i:0;s:8:"-80.0456";i:1;s:7:"40.4999";}i:6;a:2:{i:0;s:8:"-80.0452";i:1;s:7:"40.4885";}i:7;a:2:{i:0;s:8:"-80.0518";i:1;s:7:"40.4837";}i:8;a:2:{i:0;s:8:"-80.0791";i:1;s:7:"40.5023";}i:9;a:2:{i:0;s:8:"-80.1205";i:1;s:7:"40.5151";}i:10;a:2:{i:0;s:6:"-80.11";i:1;s:6:"40.531";}i:11;a:2:{i:0;s:8:"-80.1076";i:1;s:7:"40.5283";}i:12;a:2:{i:0;s:7:"-80.111";i:1;s:7:"40.5271";}i:13;a:2:{i:0;s:8:"-80.1056";i:1;s:7:"40.5208";}i:14;a:2:{i:0;s:8:"-80.0926";i:1;s:7:"40.5133";}i:15;a:2:{i:0;s:8:"-80.0932";i:1;s:7:"40.5178";}i:16;a:2:{i:0;s:8:"-80.0879";i:1;s:7:"40.5212";}i:17;a:2:{i:0;s:8:"-80.0753";i:1;s:7:"40.5205";}i:18;a:2:{i:0;s:8:"-80.0718";i:1;s:7:"40.5233";}i:19;a:2:{i:0;s:8:"-80.0611";i:1;s:7:"40.5201";}i:20;a:2:{i:0;s:8:"-80.0614";i:1;s:7:"40.5059";}}';

# unserialize the code taken from your mySQL database. If your data is not serialized, comment this line out
$bounds = unserialize($latlon);

if ($bounds) {
	# cycle thru each lat/lon pair, concatenate and make pipe-delimited
	foreach ($bounds as $point) {
 		$latlon .= "%7C".$point[1].",".$point[0];
	}

	# build the image url
	$path = "color:blue|weight:4|fillcolor:black". $latlon;
	$MapAreaImage = "http://maps.google.com/maps/api/staticmap?path=".$path."&size=500x300&sensor=false&key=".$apikey;
}

The HTML

This is the code that then displays that drawn out area map image in HTML:

<img src="<?php echo $MapAreaImage; ?>" alt="" />

The Output

The PHP and HTML combined will generate the code below as the image source. A live example of this is the header image of this post (Zip Code 15202 in Pittsburgh, PA).

<img src="http://maps.google.com/maps/api/staticmap?path=color:blue|weight:4|fillcolor:black|40.5059,-80.0614|40.5123,-80.0504|40.5062,-80.0453|40.5066,-80.0336|40.5023,-80.0337|40.4999,-80.0456|40.4885,-80.0452|40.4837,-80.0518|40.5023,-80.0791|40.5151,-80.1205|40.531,-80.11|40.5283,-80.1076|40.5271,-80.111|40.5208,-80.1056|40.5133,-80.0926|40.5178,-80.0932|40.5212,-80.0879|40.5205,-80.0753|40.5233,-80.0718|40.5201,-80.0611|40.5059,-80.0614&size=500x300&sensor=false&key=ABQIAAAA_6h1iP7xkNWbJaJtdQExbxQoasim_Ec9007jwQbCPHO_oeeE-RTam6RjbglJrcjrbo6lqh5Wmpn8uQ" alt="" />