Google Mashups, pt. 1

My girlfriend and I are taking a vacation to Portland, OR during the first few days of May 2009. Having passed through the city about a year ago to see a friend, we were both surprised by how much we enjoyed our one day there. So, we’re very excited to take some time to concentrate on exploring the city.

I wanted a neat way to display what we find and where, so I wrote out what I wanted to do:

• Display the location of the attraction
• Display a short blurb about the attraction
• Display some sort of imagery related to the attraction
• Differentiate places we planned to visit and places we visited
• Easily add the unplanned attractions we find

Not surprisingly, it seemed the best way to do would be through building a Google Maps mashup. Since I don’t know Javascript, I looked for a good “mashup builder” out there, but was surprised to find most of them are either way complicated or don’t give me the level of control I was needed to make all the above things happen.

Guess it’s time to learn some JS.

The first thing one stumbles across when researching phrases like “google mashups for beginners” is the Google API information. It’s good stuff, and I learned what I needed to ask the API to do:

• Display a map of Portland, centered over the hotel
• Create tabbed info windows (to accommodate the infomation and media I want to display)
• Display differently-colored markers (one color will be “visited” and one will be “planned”)
• Pull marker data from an XML file, instead of writing the data directly into the map page (it’s a best practice for many reasons and will allow me to easily add/edit marker points)

Some serious googling will be the next step…