How to Add Google Maps to Non-US Websites

On the Mediajunk main site, I've added this Google Map showing the location of our offices. On a client site, I've added a map showing their location in the Algarve (would have been useful if I've had this before I went to stay there!).

There are a few different guides out there showing how to add a Google Map to your website, but most of them have a major flaw - if you're living outside the US, you can't use the usual recommended tools (e.g. Geocoder.us) to find the exact latitude and longitude of your location.

The workaround that I used to find the co-ordinates I want was to look up the locations on Quikmaps.com. Apart from being a really neat tool, Quikmaps displays the centre co-ordinates at the bottom of each map. Scroll the map and you'll see those co-ordinates change accordingly.

So, to find the co-ordinates of your location, just get that location into the center of the map. Use these co-ordinates as both the "map centre" and "marker" in the JavaScript variables (shown below).

How to Create the Map

You'll need to sign up for a Google Maps API key to run a map from your own website. This only takes a couple of minutes. Add the Javascript code with the key to your HTML document's header.

Add this onunload event to your body tag:

<body onunload="GUnload()">

Add this code where you want the map to appear:

<div id="map" style="width: 530px; height: 300px"></div>

Add this Javascript code just before or after your closing body tag (it needs to be here to avoid a bug in IE). Remember to change the co-ordinates to your own.

mediajunk