herskinduk/gist:7882777

## gistfile1.txt
<html>
	<head>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    	<style type="text/css">
      		html { height: 100% }
      		body { height: 100%; margin: 0; padding: 0 }
      		#map-canvas { height: 100% }
    	</style>
    	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=...&sensor=false">
    	</script>
		<script type="text/javascript" src="http://localhost:3000/markerclusterer.js"></script>
	    <script type="text/javascript">
	      function initialize() {
	        var mapOptions = {
	          center: new google.maps.LatLng(55.3781, -3.4360),
	          zoom: 6
	        };
	        var map = new google.maps.Map(document.getElementById("map-canvas"),
	            mapOptions);
	        var markers = [];
	        //getLocations(map, markers);
	        var mc = new MarkerClusterer(map, markers);

	        google.maps.event.addListener(map, 'idle', function() {
			   deleteMarkers(markers);
			   getLocations(map, markers);
			});
	      }

			function setAllMap(map, markers) {
			  for (var i = 0; i < markers.length; i++) {
			    markers[i].setMap(map);
			  }
			}

			function clearMarkers(markers) {
			  setAllMap(null, markers);
			}

			function deleteMarkers(markers) {
			  clearMarkers(markers);
			  markers = [];
			}

	      function getLocations(map, markers) {
	      	var radius = getRadius(map);
            $.ajax({
	              url: 'http://localhost:3000/locations.json?distance=' + radius.distance + '&center=' + radius.center ,
	              async:false,
	              success: function(data) {
	                 $.each(data, function(index) {
	                    addMarker(map, markers, data[index]);
	                  });
	              }
	            });
	        }

		function addMarker(map, markers, data) {
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(data.latitude, data.longitude),
				map: map,
				clickable: true,
			});

			marker.info = new google.maps.InfoWindow({
				content: '<b>Name:</b> ' + data.name + ' '
			});

			google.maps.event.addListener(marker, 'click', function() {
				marker.info.open(map, marker);
			});

			markers.push(marker);
		}


		function getRadius(map)
		{
		bounds = map.getBounds();

		center = map.getCenter();
		ne = bounds.getNorthEast();

		// r = radius of the earth in statute miles
		var r = 3963.0;

		// Convert lat or lng from decimal degrees into radians (divide by 57.2958)
		var lat1 = center.lat() / 57.2958;
		var lon1 = center.lng() / 57.2958;
		var lat2 = ne.lat() / 57.2958;
		var lon2 = ne.lng() / 57.2958;

		// distance = circle radius from center to Northeast corner of bounds
		var dis = r * Math.acos(Math.sin(lat1) * Math.sin(lat2) +
		  Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));
			return { center: center, distance: dis };
		}

	      google.maps.event.addDomListener(window, 'load', initialize);
	    </script>
	</head>
	<body>
		<h1>Maps</h1>

    	<div id="map-canvas"/>
		<script type="text/javascript">


		</script>

	</body>
</html>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map-canvas { height: 100% }
	</style>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=...&sensor=false">
	</script>
	<script type="text/javascript" src="http://localhost:3000/markerclusterer.js"></script>
	<script type="text/javascript">
	function initialize() {
	var mapOptions = {
	center: new google.maps.LatLng(55.3781, -3.4360),
	zoom: 6
	};
	var map = new google.maps.Map(document.getElementById("map-canvas"),
	mapOptions);
	var markers = [];
	//getLocations(map, markers);
	var mc = new MarkerClusterer(map, markers);

	google.maps.event.addListener(map, 'idle', function() {
	deleteMarkers(markers);
	getLocations(map, markers);
	});
	}

	function setAllMap(map, markers) {
	for (var i = 0; i < markers.length; i++) {
	markers[i].setMap(map);
	}
	}

	function clearMarkers(markers) {
	setAllMap(null, markers);
	}

	function deleteMarkers(markers) {
	clearMarkers(markers);
	markers = [];
	}

	function getLocations(map, markers) {
	var radius = getRadius(map);
	$.ajax({
	url: 'http://localhost:3000/locations.json?distance=' + radius.distance + '&center=' + radius.center ,
	async:false,
	success: function(data) {
	$.each(data, function(index) {
	addMarker(map, markers, data[index]);
	});
	}
	});
	}

	function addMarker(map, markers, data) {
	var marker = new google.maps.Marker({
	position: new google.maps.LatLng(data.latitude, data.longitude),
	map: map,
	clickable: true,
	});

	marker.info = new google.maps.InfoWindow({
	content: '<b>Name:</b> ' + data.name + ' '
	});

	google.maps.event.addListener(marker, 'click', function() {
	marker.info.open(map, marker);
	});

	markers.push(marker);
	}


	function getRadius(map)
	{
	bounds = map.getBounds();

	center = map.getCenter();
	ne = bounds.getNorthEast();

	// r = radius of the earth in statute miles
	var r = 3963.0;

	// Convert lat or lng from decimal degrees into radians (divide by 57.2958)
	var lat1 = center.lat() / 57.2958;
	var lon1 = center.lng() / 57.2958;
	var lat2 = ne.lat() / 57.2958;
	var lon2 = ne.lng() / 57.2958;

	// distance = circle radius from center to Northeast corner of bounds
	var dis = r * Math.acos(Math.sin(lat1) * Math.sin(lat2) +
	Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));
	return { center: center, distance: dis };
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
	<h1>Maps</h1>

	<div id="map-canvas"/>
	<script type="text/javascript">


	</script>

	</body>
	</html>