Ever wanted a Google Map integrated into website? Seeven Communications have found a way to embedd the map and add your company logo into your website.
1. Firstly you will need a Google Maps API code – http://code.google.com/apis/maps/signup.html
2. Add the following code before the </head> tags of your html and replace ‘KEY‘ with your Google API code:
<script src=”http://maps.google.com/maps?file=api&v=2&sensor=false&key=KEY” type=”text/javascript”></script>
3. Paste this javascript code before the </head> tags of your html:
<script type=”text/javascript”>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(”map_canvas”));
map.setCenter(new GLatLng(LAT, LONG), ZOOM);
map.setMapType(G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(new GLatLng(LAT, LONG));
map.addOverlay(marker);
var html=”<img src=’map_logo.gif‘” + “width=’165′ height=’60′/> <br/>” + “We are here!”;
marker.openInfoWindowHtml(html);
}
}
</script>
You will need to replace LAT and LONG with the latitude and longitude of your location – This can be done by first visiting http://maps.google.co.uk/ and finding your local area through the ‘Search Maps’ button. When you are happy with your map position double-click over the location you require the coordinates for and the map will centralize on that point. Retrieve the latitude and longitude coordinates by clicking on ‘Link’ in the top right hand corner and noting them from the URL that is displayed. They should look something like (53.406667, -2.152899). The ZOOM is how zoomed in the map is – the values range from 0-17 – we tend to use either 16 or 17. ‘map_logo.gif‘ refers to your logo name and location.
4. Relpace your <body> tag with this: <body onload=”initialize()” onunload=”GUnload()”>
5. Add this code where you want your map: <div id=”map_canvas” style=”width: 500px; height: 500px”></div> you can edit the size of the map by altering the width and height values.
And thats it! Many thanks to justfigures for additional help
Useful? Questions? Comments? Let us know below!
