Using Google to provide maps on your website
Author: Simon Jackson
Google maps can be a very handy addition to any website, especially on contact pages. I have seen many website with an image of a Google map or a link to the Google maps website but did you know it's very easy to actually embed a live Google map into one of your pages?
Google maps API
An application programming interface (API) is an interface implemented by a software program to enable interaction with other software. Luckily Google's API is very simple to use and Google provide plenty of documentation.
Next we need some JavaScript to create the map and place it where we want it. Its good practise to place this JavaScript in a separate file and reference it in your page header.
The contents of the file should look like this.
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
This may look complicated but there are only a few things we need to change.
- Where it says .LatLng(-34.397, 150.644) you need to replace the two numbers with the latitude and longitude of where you want to centre the map. You can find this position using services such as Flash Earth.
- Next change the number that comes after zoom. This number changes how zoomed in/out the map will be, a higher number of say 14 is good for showing a building and a lower number of 10 could show the entire town/city.
- Where it says getElementByID("map_canvas") we need to replace the map_canvas with the ID of the div we want to place the Google map within.
That's actually all you need to change, as long as
(or whatever you changed it to) exists in you page and has a width and height this should work.