coogie/index.html

## index.html
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Create markers on GMap from XHR</title>

        <style>
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 650px }
        </style>

    </head>
    <body>

        <p>This sample page will create markers on a map, with their information being retreived via XHR.</p>

        <div id="map-canvas"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <script>
            var map,
                directionsDisplay,
                userIcon = 'http://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png',
                ditIcon  = 'http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-blue.png',
                infowindow = new google.maps.InfoWindow(),
                directionsService = new google.maps.DirectionsService(),
                userLocation = new google.maps.LatLng(53.3478, -6.2597); // We default userLocation to Dublin's coords

            function getUserLocation() {
                // Try HTML5 geolocation
                if(navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {

                        // Update the userLocation variable to their real location
                        userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                        // Let's first create a marker for the users's current location
                        var userMarker = new google.maps.Marker({
                            position: userLocation,
                            map: map,
                            icon: userIcon
                        });

                        // Create a nifty little popup for if a user
                        // clicks on their own marker
                        google.maps.event.addListener(userMarker, 'click', function() {
                            infowindow.setContent('Your current location!');
                            infowindow.open(map, userMarker);
                        });

                        // And now, because the browser support the geolocation API,
                        // we can then change the map centre using setCenter()
                        map.setCenter(userLocation);

                    });
                }
            }

            function calculateRoute(startPoint, endPoint) {
                var request = {
                    origin: startPoint,
                    destination: endPoint,
                    travelMode: google.maps.TravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();

                // We'll create our map, and centre it on userLocation defined at the top .
                // This is good if the user's browser doesn't support the geolocation API
                var mapOptions = {
                    center: userLocation,
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                directionsDisplay.setMap(map);

                // Call the getUserLocation function
                getUserLocation();

            }

            // Now let's make our API call
            $.get("https://dl.dropboxusercontent.com/s/914k4tfsg7v5foh/locations.json", function( data ) {
                // Because Dropbox returns our data as a string,
                // we've to put it back to valid JSON using parseJSON.
                // Normally, we wouldn't have to do this as we'd get valid JSON
                data = $.parseJSON(data);

                // Loop through the results of our API response
                for (var i = 0; i < data.length; i++) {
                    var collegeName = data[i].name,
                        collegeLat  = data[i].lat,
                        collegeLng  = data[i].lng,
                        collegePos  = new google.maps.LatLng(collegeLat, collegeLng);

                    // Create a marker for each of the items in our data array
                    var marker = new google.maps.Marker({
                        position: collegePos,
                        map: map,
                        title: collegeName,
                        icon: ditIcon
                    });

                    // And then attach an infoWindow to each of the markers
                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.setContent(this.title);
                        infowindow.open(map, this);
                        calculateRoute(userLocation, this.position);
                    });

                };
            });

            // Run the initialize() function when the window has loaded
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

    </body>
</html>

## location.json
[
    {
        "name": "DIT Aungier St",
        "lat": 53.33854,
        "lng": -6.266788
    },
    {
        "name": "DIT Kevin St",
        "lat": 53.3374,
        "lng": -6.26829
    },
    {
        "name": "DIT Rathmines Rd",
        "lat": 53.324432,
        "lng": -6.265704
    },
    {
        "name": "DIT - 143 Rathmines Rd",
        "lat": 53.325209,
        "lng": -6.265622
    },
    {
        "name": "DIT Chatham Row",
        "lat": 53.341101,
        "lng": -6.263226
    },
    {
        "name": "DIT Temple Bar",
        "lat": 53.345261,
        "lng": -6.265576
    },
    {
        "name": "DIT Cathal Brugha St",
        "lat": 53.352164,
        "lng": -6.259566
    },
    {
        "name": "DIT Mountjoy Square",
        "lat": 53.356003,
        "lng": -6.256643
    },
    {
        "name": "DIT Portland Row",
        "lat": 53.356864,
        "lng": -6.249813
    },
    {
        "name": "DIT Bolton St",
        "lat": 53.351407,
        "lng": -6.269631
    },
    {
        "name": "DIT Linenhall",
        "lat": 53.35159,
        "lng": -6.27073
    },
    {
        "name": "DIT Grangegorman",
        "lat": 53.354309,
        "lng": -6.279264
    },
    {
        "name": "DIT Mount St - 14 Upper Mount Street",
        "lat": 53.337612,
        "lng": -6.245748
    },
    {
        "name": "DIT Sackville Place",
        "lat": 53.348886,
        "lng": -6.258924
    },
    {
        "name": "National Optometry Centre",
        "lat": 53.337523,
        "lng": -6.26902
    },
    {
        "name": "DIT Beresford Street",
        "lat": 53.349834,
        "lng": -6.273451
    },
    {
        "name": "DIT Focas Institute, Camden Row, Dublin 8",
        "lat": 53.336139,
        "lng": -6.267411
    },
    {
        "name": "DIT Aviation Technology Centre",
        "lat": 53.426515,
        "lng": -6.22315
    }
]
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<title>Create markers on GMap from XHR</title>

	<style>
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map-canvas { height: 650px }
	</style>

	</head>
	<body>

	<p>This sample page will create markers on a map, with their information being retreived via XHR.</p>

	<div id="map-canvas"></div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

	<script>
	var map,
	directionsDisplay,
	userIcon = 'http://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png',
	ditIcon = 'http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-blue.png',
	infowindow = new google.maps.InfoWindow(),
	directionsService = new google.maps.DirectionsService(),
	userLocation = new google.maps.LatLng(53.3478, -6.2597); // We default userLocation to Dublin's coords

	function getUserLocation() {
	// Try HTML5 geolocation
	if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {

	// Update the userLocation variable to their real location
	userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

	// Let's first create a marker for the users's current location
	var userMarker = new google.maps.Marker({
	position: userLocation,
	map: map,
	icon: userIcon
	});

	// Create a nifty little popup for if a user
	// clicks on their own marker
	google.maps.event.addListener(userMarker, 'click', function() {
	infowindow.setContent('Your current location!');
	infowindow.open(map, userMarker);
	});

	// And now, because the browser support the geolocation API,
	// we can then change the map centre using setCenter()
	map.setCenter(userLocation);

	});
	}
	}

	function calculateRoute(startPoint, endPoint) {
	var request = {
	origin: startPoint,
	destination: endPoint,
	travelMode: google.maps.TravelMode.DRIVING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	}
	});
	}

	function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();

	// We'll create our map, and centre it on userLocation defined at the top .
	// This is good if the user's browser doesn't support the geolocation API
	var mapOptions = {
	center: userLocation,
	zoom: 14,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	directionsDisplay.setMap(map);

	// Call the getUserLocation function
	getUserLocation();

	}

	// Now let's make our API call
	$.get("https://dl.dropboxusercontent.com/s/914k4tfsg7v5foh/locations.json", function( data ) {
	// Because Dropbox returns our data as a string,
	// we've to put it back to valid JSON using parseJSON.
	// Normally, we wouldn't have to do this as we'd get valid JSON
	data = $.parseJSON(data);

	// Loop through the results of our API response
	for (var i = 0; i < data.length; i++) {
	var collegeName = data[i].name,
	collegeLat = data[i].lat,
	collegeLng = data[i].lng,
	collegePos = new google.maps.LatLng(collegeLat, collegeLng);

	// Create a marker for each of the items in our data array
	var marker = new google.maps.Marker({
	position: collegePos,
	map: map,
	title: collegeName,
	icon: ditIcon
	});

	// And then attach an infoWindow to each of the markers
	google.maps.event.addListener(marker, 'click', function () {
	infowindow.setContent(this.title);
	infowindow.open(map, this);
	calculateRoute(userLocation, this.position);
	});

	};
	});

	// Run the initialize() function when the window has loaded
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>

	</body>
	</html>
	[
	{
	"name": "DIT Aungier St",
	"lat": 53.33854,
	"lng": -6.266788
	},
	{
	"name": "DIT Kevin St",
	"lat": 53.3374,
	"lng": -6.26829
	},
	{
	"name": "DIT Rathmines Rd",
	"lat": 53.324432,
	"lng": -6.265704
	},
	{
	"name": "DIT - 143 Rathmines Rd",
	"lat": 53.325209,
	"lng": -6.265622
	},
	{
	"name": "DIT Chatham Row",
	"lat": 53.341101,
	"lng": -6.263226
	},
	{
	"name": "DIT Temple Bar",
	"lat": 53.345261,
	"lng": -6.265576
	},
	{
	"name": "DIT Cathal Brugha St",
	"lat": 53.352164,
	"lng": -6.259566
	},
	{
	"name": "DIT Mountjoy Square",
	"lat": 53.356003,
	"lng": -6.256643
	},
	{
	"name": "DIT Portland Row",
	"lat": 53.356864,
	"lng": -6.249813
	},
	{
	"name": "DIT Bolton St",
	"lat": 53.351407,
	"lng": -6.269631
	},
	{
	"name": "DIT Linenhall",
	"lat": 53.35159,
	"lng": -6.27073
	},
	{
	"name": "DIT Grangegorman",
	"lat": 53.354309,
	"lng": -6.279264
	},
	{
	"name": "DIT Mount St - 14 Upper Mount Street",
	"lat": 53.337612,
	"lng": -6.245748
	},
	{
	"name": "DIT Sackville Place",
	"lat": 53.348886,
	"lng": -6.258924
	},
	{
	"name": "National Optometry Centre",
	"lat": 53.337523,
	"lng": -6.26902
	},
	{
	"name": "DIT Beresford Street",
	"lat": 53.349834,
	"lng": -6.273451
	},
	{
	"name": "DIT Focas Institute, Camden Row, Dublin 8",
	"lat": 53.336139,
	"lng": -6.267411
	},
	{
	"name": "DIT Aviation Technology Centre",
	"lat": 53.426515,
	"lng": -6.22315
	}
	]