How to add Google Maps to your Website

Why Add Google Maps to your site.

  1. 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.
  2. Google maps allow your visitors to zoom in and out and move the map around.
  3. 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

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.

Copy the provided Key into notepad or your preferred software.

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&amp;v=2&amp;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.