The Google Map Odyssey

Today the first version of QUT Google Maps was released at http://www.qut.edu.au/about/location/index.jsp

It features

  • Markers identifying building locations with links to relevant web sites
  • Map, Satellite and Hybrid views
  • Drag, zoom and scroll functionality
  • Wireless access overlay at Gardens Point
  • Images of Buildings at Gardens Point (later to be added for Kelvin Grove and Caboolture)
  • Food and Vending machines overlay functionality
  • A secure route overlay

Not excessive,  but definitely an improvement on the static versions.  But back to the Odyssey…

Approximately 18 months ago excitable Jodie pronounced “Peter can do Google Maps”!  I thought it was a great idea, Jodie was inspired, but devilsome-dec intervened.  Not in a big way, more in a prioritising type me first type of way.

clickmap

A drag and drop Google Map was created -dec intervened.  A few icons were placed on the map – dec intervened.  A video link was embedded, a few styles added, dec-again.

Finally some progress was made with assistance from the excellent tutorials of Mike at http://econym.org.uk/gmap/ , Google Mapki and the Google Map’s API at http://code.google.com/apis/maps/documentation/index.html.  A selection dropdown was added, and some location point functionality.

selection

Some wireless access points were added, food location overlays and a secure route.  Things were coming together nicely.  A map overlay was added, later to be removed as it was decided that the google satellite view would be the default.  Chill out areas were added(because as a student I need to get away from it all) later to be removed and used in a future edition.

mapnostyle

Finally this year, with an acceptable beta version available to integrate into a .jsp page.

Several techniques were used in the final integration

  • All of the styles for the map were in a CSS file
  • The map was included in a .jsp page stylishly created by Rebecca Watson
  • All of the marker points were inserted via an xml file
  • Javascript is used for most of the Google Map API functionality ( and must be turned on) and is referenced in external files
  • An internet connection is required(especially in the corporate network where firewalls and Internet Access logins exist) to access the Google Map key
  • Small errors in the javascript and xml can cause the whole map to break
  • IE6 still causes all sorts of layout problems due to the lack of following of W3C standards

In a future blog I will touch on some of the technical issues encountered upon the way, and some simple code to assist in map development.  For those of you not acquainted with QUT IT Service the term dec ( Daily Event Coordinator) is a used for the person responsible for handling enquiries and support for a particular area.

4 Comments

  1. Posted August 13, 2009 at 2:58 pm | Permalink

    Cool. My friend showed me this and I think it is a really useful tool. I’m not very familiar with the Google Maps API but I wish I was. I’ll have to check out those tutorials. Thanks for the links.
    -Ben

  2. Posted August 17, 2009 at 2:27 pm | Permalink

    That’s crazy! I can’t believe I haven’t seen this yet.

    Any plans for 3D version? I want to see what’s on sale in the food areas.

    The gardens look so dry looking down on them.

  3. admin
    Posted August 17, 2009 at 4:42 pm | Permalink

    It’s only been published a few weeks Paul
    video additions will probably come before 3d as
    there’s not much Google street view around QUT yet

  4. Posted September 8, 2009 at 10:27 pm | Permalink

    Hey,

    You’ve done some nice work there.

    Suggestions for improvement:

    Change the GIcon to an image (as in a letter for each building).

    Jason

One Trackback

  1. By Checkpoint- Web 2.0 is like Cooking on August 25, 2009 at 8:20 pm

    [...] I then investigated some Web 2.0 applications, Mint.com,  Confluence Wiki and detailed a recent mashup I created with Google Maps [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>