Google Mashups, pt. 3

This time around, I want to figure out to load data from an XML file and how that XML file should be structured. Having never worked with XML files from scratch before, I’m a little apprehensive, but, hey, there’s not much that can actually break…

First, I set up my map controls:

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

Problem is, I don’t dig the tiny controls (hello, 2001 called…), so I updated to the latest version I can find in the API docs:

map.addControl(new GLargeMapControl3D());
map.addControl(new GMapTypeControl());

This version of the map is here.

Ok, so here’s an interesting thing. The new control I’m using still doens’t match the current control on maps.google.com. I’m not sure why, but I’m sure it has something to do with StreetView, and I probably need to learn how to use the specialized StreetView tools…but I digress.

Oh, bonus! Looks like the tutorial I’m using has _blank">section on working with an XML file…tells me to use the GDownloadURL method:

GDownloadUrl("data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));

Problem is, it doesn’t work, and although I spend some time peering at it, I’m just not quite yet comfortable enough to spot whatever’s broken. The tutorial is from 2006…I guess the API could have changed. More googling is in order.

Google Mashups, pt. 2

The goal of this effort is only to get a map on a page and get a marker on a page…seems pretty easy. As promised, there’s some serious googling to be done, and I came up with this page: InformIT article.

So this seems to work pretty well, although the first few steps I’ve already figured out from Google’s API documentation (seems it taught me more than I realized). What I really need is some very basic code to get started so I can pull my coordinates out and start playing:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIKEY" type="text/javascript"></script>
<script type="text/javascript"><!--

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(LATITUDE, LONGITUDE), ZOOM);
}
}
// --></script>

and…

var point = new GLatLng(LATITUDE,LONGITUDE)
map.addOverlay(new GMarker(point));

So that gets me started, and after adding minimal styling information, I come up with this: first version of map.

Mission accomplished, it seems, so I decide to try for one more step: adding an info window. Incredibly easy: second version of map.

Well, the tutorial is pretty step-by-step, but I’m finding that because of the Rails work, I can follow the what the code is doing much more easily. That still doesn’t mean I’m able to extrapolate and figure too much new stuff on my own, but it makes following the API docs easier.

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…