jakebathman
5/11/2015 - 5:18 PM

Google Maps v3 basic example

Google Maps v3 basic example

map.php
content_copyfile_download
<!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>