July 2nd, 2009
I had the chance a few days ago to play with the Google Maps API to rework EsperNet’s Servers Page. It turns out that very much like Google’s applications, it’s APIs are also ludicrously easy to use.
I only spent a few hours putting together a real server map (as opposed to a static table of names, locations, etc) that actually looks nice!
To be honest, I spent most of the time putting together the little fly out window. It required new CSS classes and a lot of construction and insertion of elements into the DOM. Getting it looking just right (doesn’t quite look right in IE 7 — the staff table doesn’t show up) was by far the most time consuming activity.
To get started with something like this, get yourself a Google Map API key and code up a little something like this:
<!-- style for height and width -->
<div id="map"></div>
<script type="text/javascript">
// initialize the map
function initialize_map() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(50,-50), 2);
map.setUIToDefault();
}
}
// add events to run on load for IE (top block) and everything else (bottom)
if (window.attachEvent) {
window.attachEvent("onload", initialize_map);
window.attachEvent("onunload", GUnload);
} else {
window.addEventListener("load", initialize_map, false);
window.addEventListener("unload", GUnload, false);
}
</script>
You can then add new points very easily:
var point = new GLatLng("50", "50"); // lat, longitude
var marker = new GMarker(point, { title:"Cool Title" });
GEvent.addListener(marker, "click", function() {
marker.openInfoWindow(document.createTextNode("info"));
});
map.addOverlay(marker);
You can call openInfoWindow with any DOM element. For the servers page, I built up a DIV filled with some text and a table. Or you can just add text.
For latitude and longitude, I used Google Maps and put in a city name (e.g; Morrison, CO). I’m not sure if there’s an easy way to do this through the API. It would make life simpler!
Posted in Geek | No Comments »
Software Developer, Consultant, and Geek.
