Making the Google map
1) First we need to login to our Google account and click on the Maps link at the top left of the screen.
2) Type in the location you want to display on the map. In this example we want the IFC2 building in Hong Kong.
3) The map generated shows the correct location and, in this case, is showing a number of markers. Clicking these markers brings up information windows.
4) Now we have found our location we need to save the map so that we can start to customise it to our needs. To do that we need to click on the tab called My Maps and then on the button called Create New Map.
5) A short form is displayed with Title, Description and Privacy fields. For this example (featuring a fake event!) we will choose Unlisted. When this is done click the Save button.
6) Now we are ready to customise the map to our needs. To begin with we want to get rid of all the markers that Google has added to the map. To do that simply right-click on any marker and select “Clear Search Results”.
7) To add a marker of our own we left-click the blue pin icon at the top of the map and drag the new marker to the location we want to highlight. Left-click again to fix the marker in position.
A window opens allowing the marker information to be customised. There are a number of things to note: the description can be either Plain Text or Rich Text – the latter allows for us to do things such as make text bold, change text colour, add a link or even add an image. In the screenshot below we have clicked the chain icon and can now enter a link to a website using the highlighted text; furthermore, by clicking the blue pin icon at the top left we can change the shape and colour of the marker.
8) Next we want to change the map area and position. To do this click the left mouse button and drag the map until you have the correct position. To zoom in (or out) you can either use the slider scale on the left of the map or use the mouse wheel. You should do this very carefully to avoid excess zooming – it is easy to lose your map position.
9) We now repeat step 7 and place another marker – this time we choose a green pin.
10) You will also notice at the top of the map that there are icons for drawing lines and shapes. For our example we will click on the line icon to draw a line between our two markers. The mouse pointer changes to crosshairs and we are asked to click on the start position. We drag the line to the end point and double-click the left mouse button. Once again an information box pops up so that we can annotate the line (should we want to).
11) Now our map is done so we can click on the Done button on the left of the screen (under the My Maps tab). Now all the markers, lines and shapes we used are listed on the left of the screen. One important thing to note is the Collaborate link. If you are part of a group and want everyone work on the map you can invite them and give them access to it.
12) Now we have our map we want to use it in our blog post. To achieve this we click “Link to this page” at the top right of the map. The pop-up window gives us a URL to our map page (which we can email or use as a link) and also code to embed the map into our website – this is what we want to do so.
13) We could just click in the lower box and copy all the code, however, it is useful to click on the link “Customize and preview embedded map” to fine-tune our map so that it fits on our blog page. The new window allows us to select the size of the map on our page and to move the preview map so that it is just what we want. Finally, select all of the code in the bottom window and copy it to the clipboard.
Embed the map into our blog
14) Now we go to our blog and create a new post. When we get to the position where we want to display our map we switch to code view and click the button marked code. (Note that the button immediately changes to the closing tag /code).
15) With the cursor position after the <code> tag we paste in the map code we copied in step 14).
And then we close the <code> tag. We can now resume writing in Visual mode and complete our blog post. When we preview the page we see the map embedded in our post:
Notice that the map is dynamic and can be dragged around with the mouse. If we click the markers (or the line) we get the pop-up information window with the details we provided.
