woodwardtw · January 28, 2025 20:26
diff --git a/Google Map Marker LatLong b/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>