woodwardtw/Google Map Marker LatLong

## Google Map Marker LatLong
<!DOCTYPE html>
<html>
  <head>
	<title>Geolocation</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	  html, body {
		height: 100%;
		margin: 0px;
		padding: 0px
	  }
	#map-canvas {
	  	height: 50%;
	  	margin: 0px;
	  	padding: 0px
		}
	 .main {
		 width:90%;
		 padding:20px;
		 font-size: 1.2em;
	 }

	     /* Hiding the boxes which I show when I troubleshoot */
	 #latbox, #longbox {
		 display: none;
	 }

	 .btn {
	   background: #3498db;
	   background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	   background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	   background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	   background-image: -o-linear-gradient(top, #3498db, #2980b9);
	   background-image: linear-gradient(to bottom, #3498db, #2980b9);
	   -webkit-border-radius: 8;
	   -moz-border-radius: 8;
	   border-radius: 8px;
	   font-family: Arial;
	   color: #ffffff;
	   font-size: 20px;
	   padding: 10px 20px 10px 20px;
	   text-decoration: none;
	 }

	 .btn:hover {
	   background: #3cb0fd;
	   background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	   background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	   background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	   background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	   background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	   text-decoration: none;
	 }

	</style>

<script type="text/javascript"

//Note: put your own API key in here- replacing PUT_YOUR_OWN_API_KEY_IN_HERE

  src="https://maps.googleapis.com/maps/api/js?key=PUT_YOUR_OWN_API_KEY_IN_HERE">
</script>
	<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;
var marker;
var laturl;
var lngurl;
var baseurl = "http://augmenting.me/geo/report/?coordinates=";
var linkurl;
var comma = ", ";

//set map variables
function initialize() {
  var mapOptions = {
	zoom: 18
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
	  mapOptions);

  // Try HTML5 geolocation to get location
  if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	  var pos = new google.maps.LatLng(position.coords.latitude,
									   position.coords.longitude);

	  var marker = new google.maps.Marker({
		map: map,
		position: pos,
		title: 'We are watching you.',
		draggable: true,
		icon: {
		  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
		  scale: 10,
		  strokeColor: '#FF0000'
		},
	  });

//gets the pre-drag lat/long coordinates as a pair
	  document.getElementById("latbox").innerHTML=marker.getPosition().lat();

//gets the pre-drag latlong coordinate
		  document.getElementById("latbox").innerHTML=marker.getPosition().lat();
		  document.getElementById("longbox").innerHTML=marker.getPosition().lng();
		  var laturl=marker.getPosition().lat();
		  var lngurl=marker.getPosition().lng();
		  var linkurl=baseurl.concat(laturl,comma,lngurl);
		  document.getElementById("linkurl").href=linkurl;

//gets the new latlong if the marker is dragged
		google.maps.event.addListener(marker, "drag", function(){
			document.getElementById("latbox").innerHTML=marker.getPosition().lat();
			document.getElementById("longbox").innerHTML=marker.getPosition().lng();
			var laturl=marker.getPosition().lat();
			var lngurl=marker.getPosition().lng();
			var linkurl=baseurl.concat(laturl,comma,lngurl);
			document.getElementById("linkurl").href=linkurl;
		});

	  map.setCenter(pos);
	}, function() {
	  handleNoGeolocation(true);
	});
  } else {
	// Browser doesn't support Geolocation
	handleNoGeolocation(false);
  }

}

//if it all fails
function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
	var content = 'Error: The Geolocation service failed.';
  } else {
	var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
	map: map,
	position: new google.maps.LatLng(60, 105),
  };

  var marker = new google.maps.Marker(options);
  map.setCenter(options.position);


}

google.maps.event.addDomListener(window, 'load', initialize);


	</script>
  </head>
  <body>
	<div id="map-canvas"></div>
		<div class="main">
			<h2>Directions</h2>
			<p>If you allowed the site access to your location, you should see it indicated above with a red arrow. If you said no but want to change your mind just click <a href="http://augmenting.me/water/mapit.html">here</a> and choose "Yes" when prompted.</p>
				<p>
				You can drag
				the arrow around if you need to adjust the location. Once you get it in the right place, click on the button below to start submitting your water quality information.</p>
			<a  id="linkurl" class="btn" href="http://augmenting.me">NEXT</a>
		</div>
<div id="latbox"></div>
<div id="longbox"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Geolocation</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	html, body {
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	#map-canvas {
	height: 50%;
	margin: 0px;
	padding: 0px
	}
	.main {
	width:90%;
	padding:20px;
	font-size: 1.2em;
	}

	/* Hiding the boxes which I show when I troubleshoot */
	#latbox, #longbox {
	display: none;
	}

	.btn {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 8;
	-moz-border-radius: 8;
	border-radius: 8px;
	font-family: Arial;
	color: #ffffff;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	}

	.btn:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;
	}

	</style>

	<script type="text/javascript"

	//Note: put your own API key in here- replacing PUT_YOUR_OWN_API_KEY_IN_HERE

	src="https://maps.googleapis.com/maps/api/js?key=PUT_YOUR_OWN_API_KEY_IN_HERE">
	</script>
	<script>
	// Note: This example requires that you consent to location sharing when
	// prompted by your browser. If you see a blank space instead of the map, this
	// is probably because you have denied permission for location sharing.

	var map;
	var marker;
	var laturl;
	var lngurl;
	var baseurl = "http://augmenting.me/geo/report/?coordinates=";
	var linkurl;
	var comma = ", ";

	//set map variables
	function initialize() {
	var mapOptions = {
	zoom: 18
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	// Try HTML5 geolocation to get location
	if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var pos = new google.maps.LatLng(position.coords.latitude,
	position.coords.longitude);

	var marker = new google.maps.Marker({
	map: map,
	position: pos,
	title: 'We are watching you.',
	draggable: true,
	icon: {
	path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
	scale: 10,
	strokeColor: '#FF0000'
	},
	});

	//gets the pre-drag lat/long coordinates as a pair
	document.getElementById("latbox").innerHTML=marker.getPosition().lat();

	//gets the pre-drag latlong coordinate
	document.getElementById("latbox").innerHTML=marker.getPosition().lat();
	document.getElementById("longbox").innerHTML=marker.getPosition().lng();
	var laturl=marker.getPosition().lat();
	var lngurl=marker.getPosition().lng();
	var linkurl=baseurl.concat(laturl,comma,lngurl);
	document.getElementById("linkurl").href=linkurl;

	//gets the new latlong if the marker is dragged
	google.maps.event.addListener(marker, "drag", function(){
	document.getElementById("latbox").innerHTML=marker.getPosition().lat();
	document.getElementById("longbox").innerHTML=marker.getPosition().lng();
	var laturl=marker.getPosition().lat();
	var lngurl=marker.getPosition().lng();
	var linkurl=baseurl.concat(laturl,comma,lngurl);
	document.getElementById("linkurl").href=linkurl;
	});

	map.setCenter(pos);
	}, function() {
	handleNoGeolocation(true);
	});
	} else {
	// Browser doesn't support Geolocation
	handleNoGeolocation(false);
	}

	}

	//if it all fails
	function handleNoGeolocation(errorFlag) {
	if (errorFlag) {
	var content = 'Error: The Geolocation service failed.';
	} else {
	var content = 'Error: Your browser doesn\'t support geolocation.';
	}

	var options = {
	map: map,
	position: new google.maps.LatLng(60, 105),
	};

	var marker = new google.maps.Marker(options);
	map.setCenter(options.position);


	}

	google.maps.event.addDomListener(window, 'load', initialize);



	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	<div class="main">
	<h2>Directions</h2>
	<p>If you allowed the site access to your location, you should see it indicated above with a red arrow. If you said no but want to change your mind just click <a href="http://augmenting.me/water/mapit.html">here</a> and choose "Yes" when prompted.</p>
	<p>
	You can drag
	the arrow around if you need to adjust the location. Once you get it in the right place, click on the button below to start submitting your water quality information.</p>
	<a id="linkurl" class="btn" href="http://augmenting.me">NEXT</a>
	</div>
	<div id="latbox"></div>
	<div id="longbox"></div>
	</body>
	</html>