Creating a Google Map (2)

Part Two: how to embed a Google map onto your website.

In the previous article we focused on creating a Google map detailing your company's head office of its branches. For the purpose of this tutorial we are focusing on how to place the Google map within your company's contact page.

Embedding a Google map:

1. Enter your company's postcode into Google Maps. Shortly afterwards, the Google Maps page will display the immediate area around your company's office/factory/retail unit/shed;
2. On the top right navigation bar above the map window, click on the 'Link' text link. This is augmented with a picture of a chain left of the text link;
3. On clicking the text link you should see a dialogue box below offering you two options. For the purpose of this tutorial, select the second option entitled 'Paste HTML to embed in website';
4. Copy the link by clicking on the box below the title, selecting the link by pressing CTRL+A (or Apple Key+A for Mac users) key then CTRL+C (or Apple Key+C) to copy the link.

The first four points cover how we copy the map from the Google Maps interface. After copying the link, we need to paste it into your contact page. Do this by:

1. Opening your favoured web editor (Notepad/Dreamweaver/Kompozer/Frontpage): with WYSIWIG packages like Dreamweaver, go into the 'Source Code' view of your desired page;
2. If you prefer to see the results visually, select on Dreamweaver or your other favoured web editing package 'Design and Code View';
3. If you are pasting the map within a Content Management System, or your blogging client, select 'Edit HTML'. Please note that this provision may vary from CMS to CMS or within your blogging client;
4. Paste the code within your desired position on your 'contacts' page;
5. Your Google Map has been added to your 'contacts' page.

If you have a basic knowledge of HTML coding, it is easier than you think. Seen below is an example of a Google Map embedding into the code of a web page:

View Larger Map

Cool, isn't it! You can also change the view from Satellite View to Map or hybrid mode. This example shows the town centre of Altrincham centred from our office's postcode.

Share and Enjoy!