Friday, 4 May 2012

Deep integration of Google Maps into the Moodle course page

This is so incredibly simple and the possibilities are more dynamic than you may imagine.

This is what the Google Map in the course page looks like:
Google Maps in a Moodle course page 'label' resource with custom locations marked with blue markers


How to do this:

1. Create a map in Google Maps
  1. Login to Google (with your Google account)
  2. Go to
  3. Click 'My Places'
  4. Click 'Create' map

2. Add some locations to your map
  1. Search Google Maps for some locations, or add your own via placing the blue marker in your location
  2. Click 'Save to Map' in the marker's balloon information and save to the map you just created
Search for a location in Google search, or use the blue marker (next to hand icon at top) to select a place. Then click to show balloon and choose 'save to map'

3. Create some Moodle resources or activities to link in with the locations you have chosen

'Page' resource in Moodle with content relating to a location on your map

 4. Link the URLs of your Moodle resources into Google Maps
  1. Go back to Google Maps > My Places > Your map
  2. Click 'Edit' and select a location
  3. Write some text in the box as shown below
  4. Create a hyperlink using the <link> icon (select 'rich text' for full editor options) and link back to the Moodle resources you have just created (3. above)
  5. Click 'Save' and 'Done'
Click into your map and click edit. Then choose a location and write custom notes in the balloon. You can add hyperlinks back to your Moodle resources using the <link> icon

 5. Embed the Map into your Moodle course page
When you have saved all your custom notes and hyperlinks in Google maps (above), you just need to embed the map into your course page for the full navigational effect.
  1. Click on the <link> icon as below
  2. Select the text starting <iframe>
  3. Create a label on the Moodle course page
  4. Choose <html> button on the editor 
  5. Paste the html in from Google
  6. Note: You can choose 'Customise and preview..' link to change the view of the final embedded map. Do this before pasting into Moodle
Click the link icon (next to the printer) and select the bottom piece of code (starting <iframe>)

That's all!
You now have a map in your Moodle course page which acts as a navigational device to other areas of your course (this could be a 'page' resource as above, or a wiki or discussion for student interaction activities)

Your notes with hyperlinks appear in the balloons against each of your locations

Ways to extend this capability
  1. I have demonstrated above how to link your Google maps into your course page as a navigational aid to 'page' resources. You may want to link these places to a WIKI or FORUM resource, so students have the opportunity to write their own reviews of the places
  2. You may wish to put the activities that the map links to in a hidden section at the bottom 'as orphaned' so this is the sole navigation to resources and activities on the course page.
  3. It is possible to 'collaborate' on your maps or make them available for public editing. If you select this option in Google Maps your students may want to add their own places directly into Google, and make notes and links back into their Moodle wiki pages/ forum posts etc. All changes made to the Google Map via Google will show dynamically on the course page
  4. The Google map you have created will have a link for the 'kml' file. This file will open in Google Earth application and display all your places
  5. The Google Maps API allows for embedding of Google maps in web pages with custom API queries, so you may be able to write some code which uses further API commands to extend the features of your map. Further info on the Google Maps API can be found here


  1. This comment has been removed by the author.

  2. This comment has been removed by the author.

  3. hello, thanks for sharing!
    I would like to create an activity where we see the map embedded (embedding the map is done and ok)
    What we miss is:
    - Add you location, description and upload a picture. All directly in moodle, without having to open the google page. Like in the screenshot (second one). Any idea?

  4. A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. Buy Pinterest Followers