How to add Google Maps to your Website
Why Add Google Maps to your site.
- Google Maps is an easy and free way to add a map to your website, showing where your business/shop/office/surgery etc is located or the area you cover.
- Google maps allow your visitors to zoom in and out and move the map around.
- By using Google Maps there is no need anymore to go out and buy a royalty free map or pay someone to draw one.
How to add Google to your website
Add Google Maps.
Before you make any changes to your website or add any code you need to get your key from Google & get the coordinates to centre the map on, you will need to add them to your code later.
- Go to http://code.google.com/apis/maps/signup.html accept Google’s terms and conditions and enter your domain name e.g. vennercorp.com into the box provided, then click Generate API Key.
Copy the provided Key into notepad or your preferred software.
- Go to http://www.getlatlon.com/, use this site to find your required position.
Copy the Latitude, Longitude into notepad or your preferred software.
Code
Now add the following code to your website.
- Make sure it is placed in the header section of the HTML page above the <body> tag.
- Replace the KEY HERE for your key.
- Replace the -31.434259, 152.900294 for your saved Latitude, Longitude.
- To Zoom in or out on the MAP adjust the zoom level on setCenter, it is currently set to 15.
<script src="http://maps.google.com/maps?file=api&v=2&key=KEY HERE&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-31.434259, 152.900294), 15);
map.setMapType(G_NORMAL_MAP)
map.setUIToDefault();
}
}
</script>
Now place the following code at the point in the HTML were you would like the map to be displayed.
To change the size of the map, edit the width and height as desired.
<span id="map_canvas" style="display: inline-block; width: 630px; height: 300px"></span>
That’s it, upload your changed website and test.
Written by Jon Pack+