jakebathman/map.php

## map.php
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<style>
			html, body, #map-canvas {
			height: 100%;
			margin: 0px;
			padding: 0px
			}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?key=__YOUR_GOOGLE_API_KEY_HERE__&v=3.exp&signed_in=false&libraries=geometry"></script>
		<script>
			var map;
			var markers = [];

			function initializeMap() {
				var latlng = new google.maps.LatLng(42.36008, -71.05888);
				var mapOptions = {
					zoom: 4,
					center: latlng,
					maxZoom:10,
				}
				map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

				getData();
			}

			function getData() {
				// Get the data
				var ajaxGet = $.get('https://www.example.com/maps/data.json')
				.done(function (data) {
					addMarkers(data);
				})
				.fail(function(data){
					console.debug("FAILED to get data!");
				});
			}

			function addMarkers(data) {
				intCountAddresses = 0;
				$.each(data,function(k,v){
					var marker = new google.maps.Marker({
						map: map,
						position: new google.maps.LatLng(v['lat'],v['lng'])
					});
					markers.push(marker);
				});
				finishMap();
			}

			function fitToMarkers() {
				var bounds = new google.maps.LatLngBounds();
				for(i=0;i<markers.length;i++) {
					bounds.extend(markers[i].getPosition());
				}
				map.fitBounds(bounds);
			}

			function calculateDistances() {
				// Loop to calculate distances using computeDistanceBetween()
			}

		</script>
	</head>
	<body>
		<div id="map-canvas">
		</div>

	</body>
	<script>

		$(document).ready(function() {
			initializeMap();
		});

	</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<style>
	html, body, #map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=__YOUR_GOOGLE_API_KEY_HERE__&v=3.exp&signed_in=false&libraries=geometry"></script>
	<script>
	var map;
	var markers = [];

	function initializeMap() {
	var latlng = new google.maps.LatLng(42.36008, -71.05888);
	var mapOptions = {
	zoom: 4,
	center: latlng,
	maxZoom:10,
	}
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	getData();
	}

	function getData() {
	// Get the data
	var ajaxGet = $.get('https://www.example.com/maps/data.json')
	.done(function (data) {
	addMarkers(data);
	})
	.fail(function(data){
	console.debug("FAILED to get data!");
	});
	}

	function addMarkers(data) {
	intCountAddresses = 0;
	$.each(data,function(k,v){
	var marker = new google.maps.Marker({
	map: map,
	position: new google.maps.LatLng(v['lat'],v['lng'])
	});
	markers.push(marker);
	});
	finishMap();
	}

	function fitToMarkers() {
	var bounds = new google.maps.LatLngBounds();
	for(i=0;i<markers.length;i++) {
	bounds.extend(markers[i].getPosition());
	}
	map.fitBounds(bounds);
	}

	function calculateDistances() {
	// Loop to calculate distances using computeDistanceBetween()
	}

	</script>
	</head>
	<body>
	<div id="map-canvas">
	</div>

	</body>
	<script>

	$(document).ready(function() {
	initializeMap();
	});

	</script>
	</html>