var centerLatitude = 55.30;
var centerLongitude = -0.00;
var startZoom = 3;

var map;

function init() {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.enableScrollWheelZoom();
    map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);

    retrieveMarkers();
}

window.onload = init;

function createMarker(latlng, html, iconImage) {
        var icon = new GIcon(G_DEFAULT_ICON);
        icon.image = "http://online.sae.edu/saesmall.gif";
        icon.iconSize = new GSize(25, 25);
        icon.iconAnchor = new GPoint(14, 25);
        icon.infoWindowAnchor = new GPoint(14, 14);
        var marker = new GMarker(latlng,icon);
    GEvent.addListener(marker, 'click', function() {
        var markerHTML = html;
        marker.openInfoWindowHtml(markerHTML);
    });
    return marker;
}

function retrieveMarkers() {
    var request = GXmlHttp.create();

    //tell the request where to retrieve data from.
    request.open('GET', '/maps/retrieveMarkers.php', true);

    //tell the request what to do when the state changes.
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
              var xmlDoc = request.responseXML;

              var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              for (var i = 0; i < markers.length; i++) {
                   var lng = markers[i].getAttribute("lng");
                   var lat = markers[i].getAttribute("lat");
                   //check for lng and lat so MSIE does not error
                   //on parseFloat of a null value
                   if(lng && lat) {
                      var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));

                      var html = '<div><b>Location:</b> '
                            + markers[i].getAttribute("campusname")
                            + '</div><div><b>Website:</b> <a href="'
                            + markers[i].getAttribute("website")
                            + '"/>'
                            + markers[i].getAttribute("website")
                            + '</a>'
                            + '</div>';

                      var iconImage =  markers[i].getAttribute("icon");
                      var marker = createMarker(latlng, html, iconImage);
                      map.addOverlay(marker);
                   }
              } //for
        } //if
    } //function

    request.send(null);
}