How to create a Google Map

This article demonstrates the quick and easy way for you to add a Google Map to your website.

How to create a Google Map This is a simple step by step guide to how to quickly add a Google Map to your website.

Step 1: Find Yourself.
Please visit Google Maps and put in your full address. In our example we'll use the Basespace HQ address which is:

64 John Amner Close, Ely, Cambridgeshire, CB6 1TL, UK

Step 2: Get the Code.
Google try to make it as easy as possible to use their systems, and Google Maps is no exception, once you've searched and found your location on the map, click the 'Link to this page' option in the top right (see article image).

You've now got a few options, to get the map just right I suggest you click on the 'Customize and preview embedded map' link, this opens a new window and let's us set the exact size of the embeded map.

Once you've set the map to a size that will fit your website copy all the code from the textarea at the bottom of the page.

Step 3: Add the Map.
The code you've copied can be added to any existing page in your website, for example your contact page where it might add some helpful info to people wanting to find you.

Login to your CMS and click to edit the page where you wish to add this map. Now click the 'View Source' option below the body text of the page, this will allow you to enter the code cleanly, go to the end of the entered text and press Ctrl V - or right click your mouse and Paste.

Now, save your page and go to preview, you might need to have a few goes to get it just right, just repeat the process, but when replacing the code please be careful to delete all the code you have added before. If you get stuck then use the 'Saved Backups' option to the right to revert to an older version of the page.

Important: Please Note.
Part of the distribution agreement on using Google Maps states that you cannot resell or charge for use of Google Maps, so if you are adding this page to a client site, please do not charge for this work.
Related Pages:
Subscribe to RSS Feed  Validates page XHTML  Validates page CSS  Validates site RSS feed