Multimedia Advice: How to build map mashups
I recently came across an elegant map mashup, “Tucked-away Treasures,” by Roanoke.com interactive producer Chris Zaluski.
As mashups become increasingly more popular in multimedia presentations, it is important that producers learn how to create them. Therefore, I asked Chris to explain how to get started building map mashups, with information on both the Google map API and UMapper.
“Like any new technological endeavor, getting started is the hardest part. My experience with the Google Maps API was no exception. But considering that I had limited experience beforehand and was able to create a functional map that incorporated video, sidebar navigation and rollover effects, I’d say it’s worth a try for any person willing to spend a few hours sorting through foreign code.
When I say API, I’m essentially referring to a collection of rules (or codes) provided by a programmer so others can follow those guidelines in order to create applications. The Google Maps’ API allows a person to take a normal Google Map (as you would find on maps.google.com) and customize it. This process is also known as a map “mashup,” and it can be done using a variety of other API’s such as Yahoo or UMapper.
The main benefit of using Google Maps is that their presence on the Web is so pervasive that navigation is inherit to most users. Secondly, the maps are very easy to build.
To get started you need an API key. The key is free when you sign up and is basically so Google can keep track of which Web sites are using the API.
The main piece of advice I can give from this point forward is just go with the flow and get used to looking through source code. I still don’t fully understand all the lines of code, but it’s through a guess-and-check process that this whole thing begins to take shape.
You can find the main “meat” of your code on the Google Map API section on Google Code.
If you copy that entire block of code and paste it into an .html document, the only things you will need to modify are two parts: add your personal API key and change the sensor setting to “true” or “false.” Once you do those two things, you will see a Google Map on your .html page. Pretty easy, really. (And the sensor setting applies to whether or not the application is using a sensor such as GPS to find the user’s location. Unless you’re designing this map for a mobile device, keeping it on “false” should be fine.)
From here, I spent a lot of time looking through the Google Maps API for example maps and then reading the source code of those maps.
The best resource I found was this “Google Maps API Tutorial”. It’s easy to use and has a “succeed-then-decipher” method where the source code is given first, then the explanation second. This site was linked from the Google Maps’ API site, so just keep in mind that much of what you’re looking for will be on Google’s API site.
Other effects that I added to my map were tabbed info windows, a clickable sidebar, embedded Youtube videos and custom markers with rollover effects. Just by browsing through the API site and the resource site mentioned above, I was able to find existing source code that I modified to fit my map. It’s also easy to link .xml files with your map in order to upload large amounts of markers (here’s a simple example, “Tracking Gov. Kaine,” and here’s an example that uses a heat map effect).
In addition to Google Maps, another easy way to do a map mashup is with UMapper. The difference with UMapper is that you’re actually exporting the map into ActionScript, which you can use in Flash.
One of the main benefits of UMapper is the site’s easy interface. It allows you to design a map on their site by simply dragging and dropping markers and then clicking the “Export” button to get an ActionScript code block. Once in Flash, the map can interact with other elements on the page in a much more dynamic way than Google Maps.
Choosing which map program to use largely depends on the project at hand and your skill set. If you’re starting from scratch, the Google Maps’ API or the Yahoo Maps API are both easy ways to get started.
Some more examples of what can be done:
Other posts that might interest you:
Tags: advice, API, Chris Zaluski, map, mashup, Roanoke.com, The Roanoke Times