TimKraemer/ThePoopBagMap.html

## ThePoopBagMap.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>The Poop Bag Map</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0
        }

        #map_canvas {
            height: 100%
        }
    </style>

    <!--Linking to the jQuery library.-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    <!--Linking to the Google Maps API-->
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPHuX3mEiwT882qPscfVccvtFMFXH31EY&sensor=true">
    </script>

    <script src="markerclusterer.min.js" type="text/javascript"></script>
    <script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>

    <script>
        var url_data = 'http://poopbagmap.s3.amazonaws.com/poopies.json';

        //Connects to the Flickr API and reads the results of the query into a JSON array. This query uses the 'flickr.photos.search' method to access all the photos in a particular person's user account. It also uses arguments to read in the latitude and longitude of each picture. It passes the resultant JSON array to the 'displayImages3' function below.
        $.getJSON(url_data, displayImages3);


        function displayImages3(data) {
            // Using the Google Maps API to create the map.
            var myLatlngCenter = new google.maps.LatLng(53.580833, 10.009952);
            var mapOptions = {
                center: myLatlngCenter,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            // initialize an array for all our markers
            // will crash at 4.29 billion elements :P
            // no seriously, this will get ridiculous slow with lots of elements, depending on the users computer
            // TODO: intelligent "paging" or "lazy loading" of markers (e.g. based on regions)
            var markers = [];

            //Loop through the results in the JSON array. The 'data.photos.photo' bit is what you are trying to 'get at'. i.e. this loop looks at each photo in turn.
            $.each(data.photos.photo, function (i, item) {

                //Read in the lat and long of each photo and stores it in a variable.
                var lat = item.latitude;
                var long = item.longitude;

                //Get the url for the image.
                var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
                htmlString = '<img src="' + photoURL + '">';
                var contentString = '<div id="content">' + htmlString + '</div>';

                //Create a new info window using the Google Maps API
                var infowindow = new google.maps.InfoWindow({
                    //Adds the content, which includes the html to display the image from Flickr, to the info window.
                    content: contentString
                });

                //Create a new marker position using the Google Maps API.
                var myLatlngMarker = new google.maps.LatLng(lat, long);

                //Create a new marker using the Google Maps API, and assigns the marker to the map created below.
                var marker = new google.maps.Marker({
                    position: myLatlngMarker,
                    map: map,
                    title: "Photo"
                });
                // fill in the current marker into marker array
                markers.push(marker);

                // Uses the Google Maps API to add an event listener that triggers the info window to open if a marker is clicked.
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            });
            new MarkerClusterer(map, markers);
        }
        google.maps.event.addDomListener(window, 'load', displayImages3);
    </script>
</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>The Poop Bag Map</title>
	<style type="text/css">
	html {
	height: 100%
	}

	body {
	height: 100%;
	margin: 0;
	padding: 0
	}

	#map_canvas {
	height: 100%
	}
	</style>

	<!--Linking to the jQuery library.-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

	<!--Linking to the Google Maps API-->
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPHuX3mEiwT882qPscfVccvtFMFXH31EY&sensor=true">
	</script>

	<script src="markerclusterer.min.js" type="text/javascript"></script>
	<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>

	<script>
	var url_data = 'http://poopbagmap.s3.amazonaws.com/poopies.json';

	//Connects to the Flickr API and reads the results of the query into a JSON array. This query uses the 'flickr.photos.search' method to access all the photos in a particular person's user account. It also uses arguments to read in the latitude and longitude of each picture. It passes the resultant JSON array to the 'displayImages3' function below.
	$.getJSON(url_data, displayImages3);


	function displayImages3(data) {
	// Using the Google Maps API to create the map.
	var myLatlngCenter = new google.maps.LatLng(53.580833, 10.009952);
	var mapOptions = {
	center: myLatlngCenter,
	zoom: 12,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

	// initialize an array for all our markers
	// will crash at 4.29 billion elements :P
	// no seriously, this will get ridiculous slow with lots of elements, depending on the users computer
	// TODO: intelligent "paging" or "lazy loading" of markers (e.g. based on regions)
	var markers = [];

	//Loop through the results in the JSON array. The 'data.photos.photo' bit is what you are trying to 'get at'. i.e. this loop looks at each photo in turn.
	$.each(data.photos.photo, function (i, item) {

	//Read in the lat and long of each photo and stores it in a variable.
	var lat = item.latitude;
	var long = item.longitude;

	//Get the url for the image.
	var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
	htmlString = '<img src="' + photoURL + '">';
	var contentString = '<div id="content">' + htmlString + '</div>';

	//Create a new info window using the Google Maps API
	var infowindow = new google.maps.InfoWindow({
	//Adds the content, which includes the html to display the image from Flickr, to the info window.
	content: contentString
	});

	//Create a new marker position using the Google Maps API.
	var myLatlngMarker = new google.maps.LatLng(lat, long);

	//Create a new marker using the Google Maps API, and assigns the marker to the map created below.
	var marker = new google.maps.Marker({
	position: myLatlngMarker,
	map: map,
	title: "Photo"
	});
	// fill in the current marker into marker array
	markers.push(marker);

	// Uses the Google Maps API to add an event listener that triggers the info window to open if a marker is clicked.
	google.maps.event.addListener(marker, 'click', function () {
	infowindow.open(map, marker);
	});
	});
	new MarkerClusterer(map, markers);
	}
	google.maps.event.addDomListener(window, 'load', displayImages3);
	</script>
	</head>
	<body>
	<div id="map_canvas"></div>
	</body>
	</html>