As promised, here’s the second part of the technical details for the ChallengeMap. I’m going to cover a few details related to the Google Map API. If you’re interested in the web scraping behind the scenes, hop back to Part I.
I’m not going to cover all the details of how to create the map - Googles documentation does a quite good job at that - especially if you supplement it with the community documentation effort at Mapki. However, there are a two things that took me some time to discover - so I’m sharing them here. Not only might it help you, it also becomes part of my outboard brain.
Custom Icons
Yes, the documentation touches on custom icons. It’s almost useful. However, when you just want Googles default icon in a different color, things become too tricky for the simplicity of the task. So here’s the quick way:
First, you obviously need the original icon to modify. It lives at http://www.google.com/mapfiles/marker.png, and its shadow is named shadow50.png. You could probably just refer to their files if you use them unmodified. I decided to copy them to my webserver instead, in case I ever want to change them. Creating the green marker from the red one is left as an exercise to the reader, but how to create a new icon?
Google gives you a list of seven properties to set - here’s the code to do it properly. (You could’ve easily found out for yourself, but if you’re like me, you appreciate a good copy&paste opportunity…;)
var baseIcon = new GIcon();
baseIcon.shadow = “icons/shadow50.png”;
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.image = “icons/marker_red.png”;
baseIcon.iconAnchor = new GPoint(6, 20);
baseIcon.infoWindowAnchor = new GPoint(6, 20);
var greenIcon = new GIcon( baseIcon );
greenIcon.image = “icons/marker_green.png”;
Note the cloning at the bottom - saves a total of six lines of code. Always a win.
Creating Markers
I’m creating markers from an XML data file, since keeping all Starbucks locations in my web page really didn’t seem like an option. It’s fairly forward, with one little caveat - JavaScript scoping rules. In case you, like me, say “Huh?” at this point, here’s the straightforward (but wrong!) code:
// Broken Code !!!
var markers = xmlDoc….// Get markers
for (var i = 0; i < markers.length; i++) {
… // skipped all the XML parsing
var marker = new GMarker(point,icon);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
}
So why is this wrong? The listener is bound to the same variable all the time, “marker”. Once the loop is finished, marker is set to the last marker in the array, no matter which actual marker you click on. It’s an interesting little quirk that can be solved by putting each marker in a different variable. Since I don’t want to think up all the names, let’s get this solved by scoping - we put the actual creation and addition of the event into a separate function.
function createMarker(point,html,icon) {
var marker = new GMarker(point,icon);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Since “marker” now leaves scope whenever the function returns, each call creates a new marker variable to be bound to. (In my opinion, declaring a variable inside a loop should do the same thing, but JavaScript disagrees with me.)
Great info! This type of customization is probably where Frappr would fall short. And yes, I’d say web application development is a portion of what we do at my company.
Hey Groby — I just had a reader write in that they can’t see the lil icons on IE. I just tried looking at it via IE, and I can’t see it either! Is there a way to fix this, or should these readers just switch over to firefox already?
Heh - seems I spoke to early when I told Paul I didn’t have those issues. I know what the problem is - I made a couple of script tweaks and accidentally broke something. I’ll go and fix it tonight, but I’ll also put a “Download Firefox” button on the page