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.
For the purposes of this blog post, I’ll mostly discuss how to get started using the Google Maps’ JavaScript API, but I will also talk briefly about UMapper. The differences between the two can vary depending on which Google API you use, but I’ll talk about that later.
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.
Once the key is generated, you’ll have access to the full documentation of Google Maps. However, unless you know JavaScript, that nitty gritty code will look like a foreign language. The “Map Basics” section is much easier to digest.
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.
There are two really good things about this JavaScript API. The first is that the map’s code rests in the .html code, so if you run across a mashup you really like, just check out the page’s source code to see the JavaScript technique that was used.
The second nice thing is that if you don’t know a lick of JavaScript, most of the functions are still pretty common sense. For example, just by looking through the code above, I bet you can figure out how to change the map’s starting location (map.setCenter(new GLatLng(37.4419, -122.1419), 13);). Or if you wanted to change the type of map that was used, the function is “map.setMapType(G_HYBRID_MAP).” It’s pretty easy to recognize what the lines of code mean when you’re reading through unknown source code.
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.
Pingback: Wardrobe designer
Pingback: Video | Enjolt.com | Innovate for Success
Pingback: Kimberley Porteous
Pingback: howtotweets
Pingback: AdamWestbrook
Pingback: Josh Halliday
Pingback: Ricardo Cruz
Pingback: Recommended Links for August 13th | Alex Gamela - Digital Media & Journalism
Pingback: Perogies on Deadline » Blog Archive » Busy week (end)
Pingback: Federico
Pingback: Ron Albright