Today I wrote some code that I've been wanting to play around with for a while. I know that Google Map API has been out for a while, infact its in its second version. So this afternoon I took sometime to check it out. My first impression was that it was going to be complicated. However I couldn't that couldn't of been further from the truth. If you know javascript, this is a cake walk.
The first thing I have to say is that Google did an excellent job on
documentation and examples. Also when you sign up for your API key they give you an html example to start with that is amazingly helpful. Its the most basic google Maps functionality there is, but I found it to be a great starting point.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
This pretty much has everything you need to start. It shows you how to call the Google Maps API with your key. It shows you how to create a GMap2 object and what you div and body code should look like. Well I decided for my test I would mapout the locations of the
Credit Union's Southern California branches. What I wanted was something simple and would give some branch information when you clicked on the pushpin icon. Of course like I mentioned earlier Google did a great job with the documentation and I started with the "Using Xml and Asynchronous HTTP with Maps examples". It basically shows how to use their GXml parser for javascript. Which seems to be really fast and easy.
GDownloadUrl("data.xml", function(data, responeCode){
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
Of course you need an xml document, which is simple enough, a documentElement of <markers> and the elements <marker> with attributes "lat", "lng", "branch", "address" and "phone". However my little problem was I didn't know how to figure out that latitude, after a quick google search I had what I needed.
<?xml version="1.0" ?>
<markers>
<marker lat="34.191459" lng="-118.348875" branch="Burbank" address="2340 Hollywood Way<br >
Burbank, CA 91510" phone="(800) 328-LFCU"/>
</markers>
Well now I just needed a function to write out the data to the InfoWindowHtml, well with the little sample code I was about to write a function that took the data from the xml and fill the InfoWindowHtml.
function createMarker(point, address, branch, phone){
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml("
" + branch + "
" + address + "
" + phone);
});
return marker;
}
Now that I have my marker function I just need to bring it all together.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps - LFCU Southern California Locations/title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.191459, -118.348875), 9);
function createMarker(point, address, branch, phone){
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml("<div style='font-family:arial, verdana, helvetica, sans-serif;font-size:10pt;'>
<strong>" + branch + "</strong><br />" + address + "<br />" + phone);
});
return marker;
}
GDownloadUrl("data.xml", function(data, responeCode){
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")));
var address = markers[i].getAttribute("address");
var branch = markers[i].getAttribute("branch");
var phone = markers[i].getAttribute("phone");
map.addOverlay(createMarker(point, address, branch, phone));
}
});
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 700px; height: 500px"></div>
</body>
</html>
That's it, if you know javascript, can fake your way though xml, you can have a google map up and running in no time.
Happy Coding