Google Map API

by Justin Wright

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map_canvas1">test</div>

CSS

.gmnoprint img { max-width: none; }
	  .gmnoprint .div {
		-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 0px 4px;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 0px 4px;
	  }
	  #map_canvas1{ max-width: 96%; height: 400px; margin:auto; margin-bottom:20px;}
	  #map div{max-width: inherit;}
	  #border {border: 1px solid rgb(113, 123, 135);
		 -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; 
	  }
	  #reset {padding: 1px 6px; z-index:0;}

JavaScript

var map;
	var phoenix = new google.maps.LatLng(33.551946,-112.109985);
	var locOne = new google.maps.LatLng(33.541061,-112.293369);
	var locTwo = new google.maps.LatLng(33.37738,-111.833271);
	var locThree = new google.maps.LatLng(33.454742,-112.099701);
	var locFour =  new google.maps.LatLng(33.673617,-112.020856);
	
	function HomeControl (controlDiv, map){
		// create div to hold the controls
		var controlDiv = document.createElement('div');
		controlDiv.class = 'gmnoprint';
		controlDiv.style.marginTop = '5px';
		controlDiv.index = 1;
		// set CSS for the control border
		var controlUI = document.createElement('div');
		controlUI.id = 'border';
		controlUI.style.backgroundColor = '#fff';
		controlUI.style.cursor = 'pointer';
		controlUI.textAlign = 'center';
		controlUI.title = 'Click to reset the map';
		controlDiv.appendChild(controlUI);
		// set CSS for control interior
		var controlText = document.createElement('div');
		controlText.id = 'reset';
		controlText.style.fontFamily = 'Arial,sans-serif';
		controlText.style.fontSize = '13px';
		controlText.innerHTML = '<b>Reset Map</b>';
		controlUI.appendChild(controlText);
		
		
		// create div to hold the controls for the locations
		var controlLocDiv = document.createElement('div');
		controlLocDiv.class = 'gmnoprint';
		controlLocDiv.style.marginTop = '5px';
		controlLocDiv.style.marginRight = '5px';
		controlLocDiv.index = 1;
		// set CSS for the control border
		var controlWestUI = document.createElement('div');
		controlWestUI.id = 'border';
		controlWestUI.style.backgroundColor = '#fff';
		controlWestUI.style.cursor = 'pointer';
		controlWestUI.textAlign = 'center';
		controlWestUI.title = 'Click to set the map to West Valley';
		controlLocDiv.appendChild(controlWestUI);
		// set CSS for control interior
		var controlWestText = document.createElement('div');
		controlWestText.id = 'West';
		controlWestText.style.fontFamily = 'Arial,sans-serif';
		controlWestText.style.fontSize =...