One of my favourite parts of a web development project is adding Google Maps to a web site.
They’re really simple and easy to add and can give your site that extra edge.
So how do you add a google map to your site?
First, request a free key for the Google Maps API here: http://code.google.com/apis/maps/signup.html
Add your web site URL and click Generate.
You’ll need to login to your Google account.
You’ll then receive a key which looks similar to this: ABQIAAAAdUEEB1I-1xZFGV-lVIIV2hSY58pY9NDKjzY52-otgNxuDuzzFxQc9CiP4oV_Q6plISDwk2vmhPkYAw
Now add this script below in the Head of your web page, note we’ve added the new key to it.
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAdUEEB1I-1xZFGV-lVIIV2hSY58pY9NDKjzY52-otgNxuDuzzFxQc9CiP4oV
_Q6plISDwk2vmhPkYAw" type="text/javascript"></script>
We’ll need to add another script next, with the coordinates of the pointer on the map.
Use our Google Maps Coordinates Tool to generate Latitude and Longitude co-ordinates. Simply drag the pointer to where you want it or type to search, and then copy the coordinates.
We’ll now add our second script in the head below the one we’ve already added, note we’ve added the coordinates.
The number 14 for map.setCenter is the zoom, which you can change.
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallZoomControl());
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(53.34870686020199, -6.267356872558594), 14);
}
var marker1 = new GMarker(new GLatLng(53.34870686020199,- 6.267356872558594));
map.addOverlay(marker1);
}
//]]>
</script>
We also need to change the body tag to load the map:
<body onLoad="load();" onUnload="GUnload()">
And last but not least you need to add the div in the body where you want your map to go.
<div id=”map”></div>
How easy was that?
You can then start being creative with your maps! Here are some examples:
www.hipentertainment.co.uk/contact-us.phuse
www.ehjoinery.com/contact-us.phuse
www.germwarfare.co.uk/contact-us.phuse
I’ll post a blog on how to add more than one marker on a map soon, so keep a look out!
