Add Google Maps To Your Posts

They say a picture is worth a thousand words. Adding a static map to your posts can make a world of difference. Your posts not only look good, but are informative and effective as well. Whether you are giving out directions or simply just showing off where in the world you were at one point, you can add great value and effectiveness to your posts. The good news is, adding Google Maps is not so difficult.

The Google Static Maps API

The Google Static Maps API lets you embed a Google Maps image on your webpage without requiring JavaScript or any dynamic page loading. The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. I will breakdown the URL piece by piece and explain.

The URL

http://maps.google.com/maps/api/staticmap?<em>parameters</em>

Required Parameters: Center, zoom, size and sensor. Examples.

center=101+Market+Street+San+Francisco  (enter address or latitude, longitude)
zoom=14 (from levels 1 to 20)
size=480x300 (map size in pixels)
sensor=false (use default 'false' unless using GPS locator)

Optional Parameters

Maptype: Roadmap, Satellite, Terrain or Hybrid.
Marker: See below.
Paths: See below.

Putting It All Together

We can string it all together using ampersand (&).

This URL:

http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&amp;zoom=14&amp;zoom=14&amp;size=480x300&amp;maptype=roadmap&amp;sensor=false

Produces this:
San Francisco

Finally, to add an image to your post, just add an HTML img tag. Example:

<img src=”http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&zoom=14&zoom=14&size=480×300&maptype=roadmap&sensor=false” 
alt=”San Francisco” />

There are other options that can be added such as Markers and Paths, but are a bit more involved. You can check out the rest from the Google Static API V2 Developer Guide.

HTTP Referrer

This short article will teach you how to return your program to the referring URL if you are running a PHP script or a function. At the top of the script you will need to capture the referring URL by including the following:

$ref = getenv("HTTP_REFERER");

You can then place your function next anyway you want it.

function {
 your function ...
}

When you are done, you can return the user to the referring URL by sending a header function.

header('Location: '. $ref );

Caveat: you will get a “header already sent error” if you are printing to the screen before the header function.

That’s it.

Short URLs Lead To Dead Ends

What happens when you click on a failed short URL? You can’t go anywhere. You are stuck on an island. You can’t browse the main index page since the domain you are given is the domain of the URL shortener service. One way of finding the true URL is to check if the URL short service has a lookup function.

If it doesn’t, you’re pretty much dead on the water. That’s dilemma for short URLs. It works great when it does, but if it doesn’t, it’s useless. One more thing, clicking on a shortened URL sometimes requires a leap of faith since you don’t know what page you’ll be landing. This is especially troublesome for pages that contain malware and viruses.

If you are giving out short URLs, it always good practice to check if the short URL works. If you don’t trust other services, you can always start your own.

Google and Facebook Launch URL Shorteners

Practically, anyone who tweet nowadays uses a URL shortener service. Tinyurl.com was the first one out of the gate as far as I can recall. Quickly followed by a slew of services joining the fray. The list starts from bit.ly, is.gd, tr.im, ow.ly and on and on. Here’s a comprehensive list – well, at the time it was written.

Not listed is my own personal URL shortener at uly.me. Launched about two months ago and used mostly for the personal branding of my blog – as opposed to using a third party service. Every article on my blog has a short URL, including this article. In addition, I also use uly.me for Twitter and email.

Now, Facebook and Google have started their own service. Facebook launched today FB.me, while Google announced their own called Goo.gl. Did anyone see these two coming? I’m a bit surprised. They both caught me off guard. Google’s service will focus on stability, security and speed. I’m sure they will do a great job.

Well, I’m proud to say that I got my service up before Google and Facebook ever did. I beat them by two months. That’s one accomplishment I can brag about. I know it’s not much, but it’s worth something to me. Well, it’s a great way to start the week.