Add Google Maps to your website or blog

The feature we will be using is called My Maps and it requires a Google Mail account. If you already have one, click the Sign in link in the upper right-hand corner of the page and enter the relevant email address and password. Otherwise, click the ‘Create an account now’ link and follow the prompts to create a free account. Once logged in, click the My Maps link to the left of the page followed by the Create new map link.

Type in a title and description for the map; try to make these as helpful as possible as it will aid identification in the future. Use the radio buttons beneath the description box to indicate whether the map should be made Public or Unlisted. Maps that are configured to be Public can be viewed by anyone, while those that are Unlisted can be accessed only by people who have been provided with the map’s web address. Click the Save button. Now type the name of the area you want to view in the search bar and press Enter.

An overview of that location is displayed and we need to save it to the map we just created. In the panel on the left click ‘Save to’ and select the map name from the dropdown menu that appears before clicking Save. The map view can be customised so only the area of interest is visible. Click View Map in the small yellow box that appears directly above the map. Use the map window to the right of the page to centre the map on the appropriate location by clicking and dragging with the mouse to move around (or double-clicking to zoom in). The buttons to the upper right of the maps can be used to choose which map view should be used.

With the focal point of the map set, it is time to start adding some useful content. Click the blue balloon-shaped icon to the right of the hand icon on the map to select the place-marker tool. With the tool active, click somewhere on the map to add a pushpin to highlight a place or point of interest. As soon as the place-mark has been positioned a balloon pop-up will appear. Enter a meaningful title and then click the pushpin to choose the icon that should be used (assuming you want a change from the default blue balloon).

As well as a title, it can be helpful to add a description to explain the place-mark to people viewing the map. By default, descriptions are made up of plain text, but by clicking the ‘Rich text’ link it is possible to apply special formatting such as font style, size and colour. Text can be converted into links by selecting one or more words clicking the chain-link button and then entering the address of a web page to link to ­ this could be used to link to the website of a shop highlighted on the map, say.

The final button in the pop-up toolbar can be used to insert an image into the description box. This image must have already been uploaded to another website, such as Flickr, so that the relevant URL can be provided. By clicking the Edit HTML link, it is possible to further customise the description by editing the underlying code. This method can also be used to embed other media such as Youtube videos into the description. Click OK when finished.

There is no limit to the number of place-marks that can be created and each can be uniquely customised to make it stand out from the others. If large numbers of place-marks are being added, or the map is being heavily customised in various other ways, it is advisable to save the map from time to time to avoid losing any changes that have been made ­- just click the Save button to the right of the map preview area.

As more place-marks are added, it may in the first instance be tricky to place new ones precisely where they are needed. This is not a problem as a place-mark can be positioned anywhere on the map, customised as required and then simply dragged and dropped to a new location. An undo option is available to reverse accidental moves. Any place-marks that have been added to the map are listed to the left of the page, and clicking any of the links in this list will highlight that place-mark on the map – this is useful when several have been placed very close to each other.

It is also possible to draw on maps, which can be useful for giving directions. Click the down-pointing arrow on the wavy line button next to the pushpin button and select ‘Draw a line along roads’ from the dropdown menu. Now click where the line should start, move the mouse pointer and the line will automatically ‘snap’ to any nearby road, indicating the distance from the start point; just click to end the line or continue it in another direction. The option to draw straight lines and other shapes can be accessed from the same menu.

When working on a map, it can be useful to have help from others. To allow friends to edit a map, making their own changes and additions, click the Collaborate link to the left of the map. Enter the email addresses (separated by commas) of anyone who is to be granted access to the map and use the tick boxes to the right to indicate if collaborators should be allowed to appoint other collaborators. You can enter a personal message and then click the Send invitations button.

Google Earth users should read this step, while others should skip to Step 12. Google Maps can import KML files created by Google Earth, which can serve as a useful starting point for map creation. Click the Import link to the left of the page and then use the Browse button to upload a ready made KML file, or provide the address of one which has already been uploaded to the internet.

When the map is ready to be shared with others or added to a website or blog, click the Link to the upper right of the map. Two snippets of code will be displayed. The first is a web link that can be copied and pasted into an email or instant message for others to click. The second, meanwhile, is the code necessary for integrating the map into an existing website or blog. The code can be simply copied as is and pasted into the existing HTML code of a site, though it can also be customised further to change its appearance.

At the bottom of the pop-up containing the two code snippets, click the ‘Customize and preview embedded map’ link. The page that appears can be used to adjust the size of the map as required. Choose between the three presets of Small, Medium or Large, or enter exact dimensions by selecting the Custom option. A preview of the map is displayed and beneath this is the code that is needed to add it to a website or blog post. When all necessary customisation is complete, copy and paste the code into the appropriate area of the website or blog’s HTML code.

Finally, it’s worth pointing out that, rather than simply displaying plans of a fixed location, Google Maps can be integrated into a website or blog with all its features intact ­- using something call an API. However, the process is far more involved than the first method covered in this Workshop and really only for those with serious uses for online maps. For more information about using the Google Maps API visit www.snipca.com/x616.