diegoeche/google.html

## google.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=true&v=3.4&libraries=geometry">
</script>
<script type="text/javascript">
   function initMap() {
     var latLng = new google.maps.LatLng(30.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(30.47805, -123.84716);
     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 10,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

      var radius = 5
      var lib = google.maps.geometry.spherical;
      while (radius < (3500 * 1.609)) {
        var markerPos = lib.computeOffset(latLng, radius * 1000, 0);
        var marker = new google.maps.Marker({
                     position: markerPos,
                     map: map
        });
        console.log("latitude:" + markerPos.lat())
        console.log("longitude:" + markerPos.lng())
        radius *= 2;
      }

   }

</script>
</head>
<body onload="initMap()">
  <div id="map_canvas" style="width:100%; height:80%"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0px; padding: 0px }
	#map_canvas { height: 100% }
	</style>
	<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true&v=3.4&libraries=geometry">
	</script>
	<script type="text/javascript">
	function initMap() {
	var latLng = new google.maps.LatLng(30.47805, -123.84716);
	var homeLatLng = new google.maps.LatLng(30.47805, -123.84716);
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
	zoom: 10,
	center: latLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	var radius = 5
	var lib = google.maps.geometry.spherical;
	while (radius < (3500 * 1.609)) {
	var markerPos = lib.computeOffset(latLng, radius * 1000, 0);
	var marker = new google.maps.Marker({
	position: markerPos,
	map: map
	});
	console.log("latitude:" + markerPos.lat())
	console.log("longitude:" + markerPos.lng())
	radius *= 2;
	}

	}

	</script>
	</head>
	<body onload="initMap()">
	<div id="map_canvas" style="width:100%; height:80%"></div>
	</body>
	</html>