Having a live Google map to show your company’s location is a great addition to your website. Visitors may see your location, zoom in and out to see details and click to get directions to your premises.

It is worthwhile taking the time to fully customise a map that you plan to embed in your website.

First you need to set up a Google account to save your map to.
Log into your account and then on the top left, click maps. This will bring up Google Maps.

Creating the map

Please click on any of the images in this article to see a detailed view.

Into the search box, type in the postcode of the place for which you wish to create the map. This creates a  map with a pin at your chosen location.

At this stage you should click on “Save to Map” link on the left side of the map screen.

An option box will appear immediately underneath headed “Save to my Maps”. Choose “Create New Map” and press Save .
This saves the basic map and an Edit button appears.

Modify the map

Now is time to modify the map to provide the details you wish to appear with it. Click Edit

Change the Title to a suitable one which will identify your map. Add a brief description.

You can also make the make public so it can be seen by all or make it unlisted.

If the map pin is not quite in the right location, right-click and hold the pin and drag it to the correct location.

Adding Information to the pop-up box

To add details to the pop-up information box which accompanies the map pin, click on the map pin.

You can then give a title to this box and a brief description, such as your address and telephone number.

There is a WYSIWYG editor, so you may use bold, italic, bullet points etc in this description.

You may also add a link which is useful for directing visitors to another page on your website. Simply click the chain icon and a url dialogue box will come up. Type in your full URL here  (not forgetting the http://). You may wish to take people to a page which has opening hours for example.

It is also possible to add an image, such as a logo to this information box. To do this you first need to resize your chosen image (say to about 150 pixels wide) and upload it to your website. Make a note of the image name and where it is located on your website.

For example, this might be http://www.mywebsite.co.uk/images/mylogo.jpg.

Then click the image icon and add the url to the dialogue box that pops up and click OK to add.

At this point, click OK to save all the changes you have made to the information box and then on the left-hand side of the screen click “Done” to save everything to your map. If you now click on your map pin, you will see the correct title and details pop up.

Changing the map pin

It is also possible to change the map pin to an alternative one or to a custom version (such as a mini logo).

To do this, click “edit” again on the left-hand side of the screen and then click on the map pin to re-open the information dialogue box. Whilst the information box is open, click on the map pin that is showing on the top right.

You will be offered a selection of standard alternatives. You may pick one of these.

If you would like to use your own pin, first create your pin, upload it to your website and make a note of the image name and location as above. The pin should be no larger then 64×64 pixels. Then click “Add an icon” and enter the image url into the dialogue box which opens and click OK to save.

The change to the pin may not be immediately apparent. It can take a few hours to show up on the live map.
Don’t forget to click “OK” again and then “Done” on the left hand side of the screen when the changes are complete to save the map to your account.

Adding the map to your website

The final step is to embed the map in your own website.

Make sure that all the details are correct and that the view of the map is how you would like it. You may zoom in or out to get the right amount of detail.

Now click the link icon (looks like a chain) on the top right of the screen.

You are looking for the “Paste HTML to embed in website” option.
Just below this is a link which says “Customise and preview embedded map”.

Click this to view your map.

Make sure the zoom is correct and then pick the size of your map.

When you have done this simply copy all the HTML code from the box below your map.
This is what should be placed into your website page.

You simply add the code to your page whilst in HTML view. Your newly-created, personalised map will then display on your web page.

If you have a content management system you may find that some systems will strip off html code and you may have to use other techniques to embed the code you have created.

If you don’t know how, call Chadwick Design for help and advice on 01780 740893.

If you have found this post useful, please give us a vote on Google +1. Click the button and leave your vote. Thanks!

Here’s a sample map with its own map pin and details with photo included.
View The Tithe Barn in a larger map

If you have found this post useful, please give us a vote on Google +1. Click the button and leave your vote. Thanks!