Simple Guide to put a Google Location Map on Your Website
Sunday, February 10, 2008Why draw or pay for a location map for your client when you can quite simply and easily give them a google location map that looks stunning and works great.
The google maps API has absolutely loads of options e.g. multiple markers, journeys etc but all I'm demonstrating is a simple map, with an address marker.
You have to put the following into the start tag of your <body> marker..
onload="load()"
..so it might look a bit like this..
<body onload="load()">
..all this does is load the google map.
You then need to paste the below code into your main page content area (or where you want the map to appear). Note will you have to change a couple of variables before your map will appear - listed below.
<script src="http://maps.google.com/maps?file=api&v=2&key=YOURKEYHERE" type="text/javascript">
</script>
<script type="text/javascript">
var WINDOW_HTML = '<div style="width: 200px; padding-right: 10px"><strong>My Clients Company Name</strong><br>Address1<br>Address 2<br>Postcode etc.</div>';
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(51.36445,0.3698), 13);
var marker = new GMarker(new GLatLng(51.36445,0.3698));
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(WINDOW_HTML);
});
marker.openInfoWindowHtml(WINDOW_HTML);
}
}
//]]>
</script>
<div id="map" style="border: 1px solid #979797; background-color: #e5e3df; width: 540px; height: 360px; margin: auto; margin-top: 2em; margin-bottom: 2em">
<div style="padding: 1em; color: gray">Loading...</div>
</div>
1) get your API Key by visiting http://code.google.com/apis/maps/signup.html all you have to do is tick a box and enter the URL of your website to get your key. You will need to paste your key OVER the YOURKEYHERE part of the above code.
2) Change the WINDOW_HTML value to the address (and maybe phone number) of your location (or anything you wish for that matter) - you can use html.
3) You see that there are two numerical values following the GLatLng(lat, and long) -in the code above. You need to do is replace these with the co-ordinates of the place you wish to center on the map. How do I get these? I hear you ask. The way I get these is go to www.multimap.com, type in the postcode and then scroll to the bottom of the page for the "lat" and "long" numbers.
4) You can set the height, width and border of your map by editing the last <div> of the above code.
Posted by Westley Cooper-Thorn at 12:36 |
Google Stuff
| 
Comments (0) | Link
