Map Overlays

What on earth is a Map Overlay?

A Map Overlay is a custom interactive map containing place-markers, lines and shapes overlaid onto a Google Map. When clicked on, each of the items on the overlay can contain text, mini web-pages, images, streetview links, and even video. If you have created 3D buildings that have been uploaded to the Google Earth 3D building layer, then your map overlays can be viewed in 3D on the web complete with those buildings. The 3D buildings sit on top of Google Earth’s undulating ground plain, on top of which your custom map is overlaid. A 2D or 3D custom map can then be embedded into a page on your website using a content management system such as TerminalFour Site Manager.

The best way to describe a map overlay is to show you some examples. Then I’ll describe how to make a map and publish it. At the end of this page you can view a screencast video showing the process of making your own custom Google Map and download a printable version of the instructions.

mapoverlay01

The interface used to design a custom map with a 2D view of the map.

touchoverlay

A screen-shot from a touch enabled PC showing a 3D view of the map (3D Google Maps require a small plugin to be installed). The web browser is running full screen allowing the person using it to select and manipulate either the map itself in 3D, or items running down the left hand side for a very simple, fluid user experience.

mapoverlay09

An embedded 2D and 3D map overlay created using the T4 content management system.

toucheden

A fantastic 3D example of map overlays in action, links can contain many things including video. It is possible to create 3D tours which are a great way to market what the University has to offer amongst many other educational uses.

googleearthlukes

St Lukes Campus, as viewed in Google Earth. Extensive mapping facilities are possible using the Google Earth software.

And its all free. Anyone can make a custom map!

By now you are probably thinking that this looks great but it must be really difficult or time consuming to make! While it is time consuming to make the 3D building content, it is very easy to create custom map overlays. It can quite literally take just a few minutes to make a custom map. New buildings will appear over time created by the web innovation project and other interested content creators at the University, we will be producing full instructions on creating 3D content.

  • Do I need to know how to write scripts? No.
  • Do I need to know complex web programming techniques? No.
  • Does it take a long time to make interactive maps and publish them? No.
  • Do I have full control over the contents of the of the layer? Yes.
  • Do I have to work on my own? No, you can collaborate in a group.
  • Do I need extra software? No.
  • Are changes to the map overlay slow to appear? No, they are instant!

First things, first!

Currently you will need to set yourself up with a Google login, if you don’t already have one. Refer to the first screenshot to follow the instructions below.

  • Go to http://maps.google.co.uk
  • Click the “sign in” link. Login using your Google account or click “create an account now” if you don’t yet have one.
  • Search maps for “University of Exeter”
  • Click the “satellite” button (or your preferred view) and double click to zoom into the area where you would like to create your map
  • On the left hand side, click the “my maps” link, then click “create new map”
  • Fill in the title and description and choose whether you would like your map to be public or unlisted
  • You are now editing your map

mapoverlay03

Three buttons will appear

mapoverlay035

Use the controls to draw your map, making sure you fill in the title and description fields. The description field can contain plain text, rich text or HTML. Rich text allows you to easily format your text, add images, and place links to websites. The HTML option allows you to add embedded video and other advanced web technologies.

mapoverlay02

At any time, you can invite others to collaborate with you by clicking on the collaborate link. All those invited can then edit your map. I have invited Martin to collaborate with me, and he has invited Emily. We are all now able to edit the map at the same time.

mapoverlay07 mapoverlay08

Double check that each item you place on the map says and does what you want it to when clicked on. Each placemarker can have a different icon assigned including custom icons.

mapoverlay04

Use the controls to show the desired 2D view, or click “earth” to swap to 3D. When in 3D mode hold down the middle mouse button to change your 3D view and the left mouse button to pan around. Click “Save” and “Done” once the map looks perfect.

mapoverlay05

You have now made a custom map. Clicking the ‘link’ link allows you to cut and paste either a direct link to the map or HTML embed code to add to your own website.

mapoverlay06

To control exactly how you would like your embedded map to look, click on “Customise and preview embedded map”. As you manipulate the maps settings and it’s view in this popup window, the embed code will re-write itself! Cut and paste this code into your website.

t4

To embed your custom map into your website, choose the above template when adding content using the TerminalFour Site Manager.

mapoverlay10

Streetview links can be included on your webpage, or as links within the description field of items placed on your interactive map. Cut and paste the streetview link in the same way as the map link, then paste it as a link when editing Rich Text. This is a really powerful way to allow users to match your map to views of the real world.

Mobile phones

The many mobile devices that can be used with location based services are increasing in capability every day! However, there are some limitations to their use. Much of the technologies that are in use on mobile systems are in their infancy, as such the pioneering mobile user making use of location services may have to perform one or two tasks manually. The rapid speed of development means that this will become less and less nessesary. It was not possible to interact with an embedded map overlay in June, but in July this is now possible, and improving almost every day.

Mobile usage is at the forefront of all the technologies we hope to bring to your attention. We are actively seeking the best methods availble for the mobile user to interact with location services, and to make sure that they work across as many systems and devices as possible.

For the moment, here are a few screenshots from an iPhone, making use of Google map overlays.

mapoverlaymob1The safari web browser iOS4, iPhone. The embedded map can scroll independently.

mapoverlaymob2The zoomed interactive map.

mapoverlaymob3Touching the i symbol works exactly the same as a laptop, if a little slowly.

mapoverlaymob4I have manually placed a pin on the map here. Touch the curled page icon and choose ‘drop pin’. Desktop and mobile streetview links are currently separate.

mapoverlaymob5Select the orange man in the screenshot above to display streetview on the iPhone

mapoverlaymockupThis is a fully working mock-up showing a mobile optimised map

Download this page as a printable file. Watch a Screencast video demonstration (version for small displays) and a Google video about making your own map. To help you create QR code map links, Paul Thornton has created a wonderful QR code web-tool. This allows you to drag a location pointer around a map and cut the code needed to embed a QR code map link into your own projects. For those of you that are happy to delve into the technical possibilities of geo-location services, Paul has created a set of Google Maps API V3 samples.

Leave a Reply

You must be logged in to post a comment.

Skip to toolbar