$(document).ready(function() {

    $("#DetailID").click(function() {
        $("#map_canvas").hide("slow");
        $("#map_canvas").css("display", "none");
        $("#Detail").css("display", "block");
        $("#Detail").show("slow");
        return false;
    });
    $("#LocationID").click(function() {
        $("#Detail").hide("slow");
        $("#Detail").css("display", "none");
        $("#map_canvas").css("display", "block");
        $("#map_canvas").show("slow");
        
        
        if (typeof (Locations) != "undefined") {

            if (Locations.length > 0) {
                var location = Locations[0];
                var latlng = new google.maps.LatLng(location[0], location[1]);
                var myOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(location[0], location[1]),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                setMarkers(map, Locations);
            }
        }
        return false;
    });

});

function setMarkers(map, locations) {
    
    for (var i = 0; i < locations.length; i++) 
    {
        var location = locations[i];
        
        var myLatLng = new google.maps.LatLng(location[0], location[1]);
        var marker = new google.maps.Marker({
        position: myLatLng,
        title: location[2],         
        map: map
        });
        var infowindow = new google.maps.InfoWindow({
            content: "<span class=\'arial12G4B\'>" + location[2]+"</span>"
        });
        infowindow.open(map, marker);
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    
    }
}