How to add a Google map to your contact page the easy way.

Use this article to create a map like the one below on your own web site.

The sample code is free but if you use it, please include a subtle link to www.incharge.co.uk or www.incharge.co.uk/maps somewhere on the page.

The maps are free as long as you do not charge for them and your site makes less than 50,000 requests per day. See Google Maps API Terms of Use for more details.

Download the files

Click here to download all the files and instructions used in this example.

Create a map like this...

Just like Google Maps you can drag, click, zoom and switch to satallite photo mode.

Why is this method different to other "Add a Google map in 10 minutes..." methods?

This method really can take 10 minutes.
It's as easy to use as possible. All the complexity is hidden away.
Suitable for non-coders. Just include the scripts and the on... event handlers.
You only need to make 2 changes: the Google key and the coordinates.
Degrades gracefully if the browser has incompatible JavaScript or no JavaScript.
Shows a custom icon image identifying the location.

You will need...

These example files
Google maps API license key.
- Avaliable free from http://www.google.com/apis/maps/
- You need to login with a Google account.
- The key can only be used with the domain & folder you provide.
A place-holder image representing your map.
- This is the map image that will be displayed if the map doesn't work.
- Use the provided dummy place holder for now, we will create the map image later.
- Can have any file name
- Can be any size. The resulting Google map will be the same size. If it is at least 400 pixels high then the indicator will fit under the buttons.
Icon image to be displayed over the map.
- Must have the same name as the map with '-icon' suffix e.g. map.gif becomes map-icon.gif
- The icon container has a minimum size of 200 x 60 pixels. Anything smaller will float up to the top left
The location coordinates.
- Find the location on Google maps & zoom to the required scale.
- Make the location the centre of the map (double click it).
- Click 'Link to this page' to create a link in the address bar containing coordinates.
- Copy the ll (longitude & latitude) parameter e.g. 52.203737,0.134792
- Copy the z (zoom) parameter e.g. 15

Instructions

Edit this example file, or copy its <script>, <body> and <img> tags to your own page.
Add the license key to the first script tag, after &key=
Add coordinates to the map image ID tag.
- The id must start with 'map_'
- map_[longitude]_[latitude]_[zoom]
- e.g. id="map_52.203737_0.134792_15"
Upload files to the remote server folder you specified when creating the key.
- Unfortunately, it will not work locally, because the key and folder don't match.
- Map and icon images must be in the same folder as each other, but can be in a different folder to the HTML file.
Test the map with & without JavaScript.
Make your own static map image.
- Add ?clean=1 parameter to get rid of map pan/zoom controls.
- Take a screen shot, edit it down & save it over the place-holder map image.
- Upload the new map.

How does it work?

When the page loads, the script searches the page for any images with ids starting 'map'
Images are automatically converted to Google maps, using the encoded coordinates and the map image file name.
If the browser is not JavaScript enabled, or not compatible, the image stays as it is.

Help with the techie stuff for independent graphic web designers

inCharge.co.uk limited provides technical web development services to independent graphic web designers e.g.

Content Management & e-commerce
Server-side scripting and databased back-ends.
Browser compatibility testing & fixing.
Ethical Search Engine Optimisation.
Web & Email Hosting.
More...