Google Mashup Example - Exeter College Campus.

Click on a marker or the links on the right to see details of a site; drag the map, zoom in/out or view satellite images.

Mashups.

This page shows how a custom map with many of the features of Google Maps can be created by using the Google Maps API services. These so called Google 'mashups' are being used by community groups for purposes such as disaster relief and there are now hundreds available. Services such as Frappr build on Google Maps to provide easy access without the need to write any code. In general a mashup is any web feature that builds on services provided by other sites.

An even simpler Google mashup example can be found on the Just10 Devon website.

Web 2.0.

The Google Maps API is an example of many new features appearing on the web that are being collectively called 'Web 2.0'. The web is evolving into a place of reuse, social interaction and collaborative content creation enabled by free access to simple tools, such as these. In addition to tagging, blogs and wikis there are web applications and APIs and mashups. This is having an impact in many fields including education and provides for effective collaborative e-Learning styles.

Coming of Age: An introduction to the NEW world wide web' is a free practical introduction to using many Web 2.0 features in education. It features articles by users of blogs, podcasts, wikis and others.

Lesson ideas.

Basic plan:

1. Class discussion including points of interest to add to map.
2. Copy this to a web server and edit it to remove all unwanted text.
3. Class activity using maps.google.co.uk to find the points and get the lat and lng for each (see below).
4. Edit the marker and link lines on the page (see below) supplying some descriptive text (or simple HTML markup).

Further ideas:

1. Geography: co-ordinates, maps, mapping, layers, GIS, satallite images.
2. ICT: web/web 2.0, servers/browsers, web page content/script, services/APIs/mashups.
3. Cultural: grass roots publishing, social learning, collaboration/sharing & reuse, global citizenship.
4. Legal/ethical: copyright, licenses, open/closed resources (CC & GPL), free/proprietary/commecial.

Notes on Repurposing this example.

The Google API is accessed with a small amount of Javascript code in the web page but simple changes will alter the map location, zoom and the markers with their popups.

Google Maps API key.

On opening the page having copied it to another location (e.g. using Save As) you will get an error saying the Google Maps API key is invalid. The key embedded in this file is unique to the URL of the page and was obtained from Google so you will need to replace it with one for the new location. An important restriction is that the file must be accessed through a web server, not as a local file, though you can use a local web server not on the internet for testing. More details are available on the Google Maps API Sign Up and Terms of Use pages.

Customising.

The intial location and zoom level of the map are set by the 'pCentre' and zoom variables in the script.

The markers are created near the end of the script by lines of the form:

      addMarker("name", lat, lng, "html");
      
      Where:
        name     - a unique identifier
        lat, lng - position in latitute and longitude
        html     - HTML markup to diplay in pop-up info window when marker clicked
    

The links on the right of the map are normal HTML links with the href set to:

      'javascript: showMarker("name")'
    

Geocoding - latitude and longitude.

Points in Google Maps are defined using latitude and longitude and the process of converting postal address to them is called geocoding. There are numerous ways to geocode and while the States has several free online services, there are fewer options for the UK.

You can use the Google maps web site to geocode an address by double clicking on the point to centre it and then using 'link to this page'. You can then copy them from the browser address bar; they appear after the 'll='. You will get better results when zoomed in.

Geometry management issues.

There seem to be a few issues with resizing, in particular getting the map to resize to its container. The most successful approach may be to use the window onresize event to set the width and height of the map's container, letting it grow to fill the bottom right section of the page. See the Google Maps web site for an example (hint: search for onResize in the page source).

Resources.

1. Google Maps web site.
2. Google Maps API Documentation and Mapki Wiki.
3. Intro to Web 2.0, the state of web 2.0 and Programmable web APIs and mashups.
4. Schoolforge.org.uk community website Open Source and content for education.
5. More mashups and Frappr.
6. Wikipedia entry on Mashups.

License - Open Source.

You are free to reuse this page or part of it as long as you credit the author and make any changes available under the same license terms (I'd also appreciate a back link to this page). The text on this page is under a Creative Commons licenses which provide a way for authors to specify how a work may be reused as well as ways to mark an online work. Javascript code on this page is covered by the GPL license which is one of the most popular Open Source licenses ( it may seem overkill to apply the GPL but I hope that it will act as an introduction to the benefits of Open Source). The Google map is obviously the copyright of Google.

Copyright Steve Lee 2006 fullmeasure.co.uk info@fullmeasure.co.uk.
This work is licensed under a Creative Commons Attribution-ShareAlike 2.0 England & Wales License.	This software is licenced under the CC-GNU GPL .