The Missouri State University Campus Map combines several different types of data into a single map site using the Google Maps API version 2. This past June, my office was approached by Jeffrey Thomas, a senior computer science student at the university, about software he had developed that uses BlackBerry phones as GPS devices. Jeffrey wanted to track in real time the location of buses in our campus transit system. As we looked at use cases, it didn’t take long for us to realize a large demand for such a service was going to be from the person standing at a bus stop with a mobile phone as opposed to the more traditional user on a laptop or desktop.
Version 3 API Issues
I began working on a proof of concept of such a site using the newly announced Google Maps API Version 3 but ended up having to postpone the project due to lack of features – especially polylines. After polylines were added, the first major snag I hit was lack of support for tile layers. So I wrote my own. I spent several days hammering out the code, followed by a substantial amount of time beyond that optimizing.
On our main map, we had been using invisible polygons to make our buildings clickable. I knew that strategy wasn’t going to perform well on a mobile device, so I changed to using an AJAX call that dynamically queried our database. The strategy worked so well we ended up implementing it on our main map as well. I’m even in the process of implementing the clickable tile layers that Pamela Fox described in her presentation at Google I/O on our main map.
Once these issues were handled, the major hurdles became less technical and more user-interface focused. I wasn’t happy with just having our bus routes and bus locations displayed on the map – I wanted a mobile map with the majority of the features offered on our main map.
Interacting on a Small Screen
I struggled for a while with how to create an interface that maximized the actual map size but supported three different overlays (one with sub-options), geolocation and search. With feedback from coworkers, I ended up taking a cue from the default map application on the iPhone; I added a 44 pixel action bar to the bottom of the screen and used a combination of icons and text labels. Informal user testing has shown this approach to be effective as even people not familiar with either the iPhone or our campus have been able to effectively use the map.
Branding and the Fine Print
With screen real estate a precious commodity, I knew any type of header to the page was going to have to be small. Yet it was crucial to display our university logo and the page title. I settled on a thin band at the top. It was also a requirement to have some standard fine print on the page – typically reserved for the footer. I was not willing to shrink the map any more to accommodate such text. so I ended up developing an “about” button on my bottom toolbar which brought up an overlay with all of the required information.
Optimizing Everything
Once development was nearing completion, I moved to spending a considerable amount of time on improving performance. I took full advantage of the version 3 API support for marker icons using CSS sprites. I ended up also using CSS sprites for the action bar icons.
Fortunately, the Google Closure Compiler was just released. In order to use it for JavaScript minimization and optimization, I took the time to annotate my JavaScript (which was no small task).
The Allure of the Native App
Having our map site available in various app stores would provide exposure and better usability; however, I’m not willing to maintain additional versions of the map. That only really leaves me with the option of writing a shell application that simply embeds a browser (which may still happen). Now that the map has been optimized, the performance of the web application is very close to that of the native maps application on the iPhone.
Great Job! You have put a lot of hours into developing a useful interface that potentially will be used by lots of users. One thing that i found, and I realize it is still in testing modes…but the parking button will display when clicked, go away when clicked again, however on the recall the parking does not reload. Just an FYI.
I can see this potentially being a very useful integration to many other useful tools around campus, such as a “Live” shuttle locater… I know that SGA is possibly looking into getting GPS units on shuttles, this could be integrated into this map for a “Live” feed of where the shuttle is located on its route.
This is using GPS devices on the shuttles and showing their real-time locations. Jeff Thomas, who wrote the program that runs on the shuttle GPS devices, works for SGA.
Hi,
Any chance this will be available on mobile devices other than the iPhone? Say an Android-based smartphone. Is the app currently in use?
LOL ignore my question… the last paragraph of your blog didn’t make sense to me at the time… now it does
BRILLIANT WORK!!! I was actually looking for something like this!!
This works on a Droid, FYI. It runs the Google Maps API to handle the map. The Droid was developed by Google.
A friend of mine has confirmed that it works on his Droid.
Chad, this is AMAZING. I am ridiculously impressed with how fine this is
I’ve got an icon for it added to my iPhone’s home screen
Thanks for helping provide this great service!
This is excellent! Love it!
Pingback: doesnotcompute » PlayaroundNYC. A Visualization of Playground Access in New York City
Hi Chad,
I recently used your tileoverlay.js in a project of mine (playaroundnyc.com). Thanks for providing this code. It works great and saved me the work of migrating back to google maps v2. Excellent work!
Sincerely,
Noel Billig
Does this work on Blackberries as well?
Unfortunately, none of the current web browsers available on the Blackberry include the required features for the map to function.
Well
I recently used your tileoverlay.js in a project of mine (playaroundnyc.com). Thanks for providing this code. It works great and saved me the work of migrating back to google maps v2. Excellent work!
Great
it was a huge problem to not have this. Luckily, I was able to find tileoverlay.js by Chad Killingsworth, which solved this problem for
Hi I just read your presentation “One Map to rule them all” and I am trying to build a similar map for my universities iPhone app that I am developing. Have you released any source or tutorials on how you went about getting your Google API map loaded in the iPhone? My school already has a nice map made with Googles map API already so I don’t want to spend a month recreating something that is already there; but I cannot figure out for the life of me how to load it correctly in the app. I’ve asked on StackOverflow and other iOS forums, as well as the Apple developer forums, and I have made no progress. One of the IT guys at my University attended your presentation and pointed me to your powerpoint; this is exactly what were trying to implement. Thanks for any help!
-Ryan Garchinsky
Make sure you check out the articles on the official Google Maps API documentation site: http://code.google.com/apis/maps/documentation/javascript/articles.html.