Compatibiltiy note: Marking poo locations works in Firefox 3.5 and higher, iPhone, and maybe Droid. When SQLite is added it will end up being only iPhone or Droid.
One thing that took way too much time to debug was how get the code recognized as HTML5. One way is to strip out all the things indicating that it's not HTML 5 and include only an html tag by itself. This let's the browser choose.
And here's the code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Where in the world is my dog pooin!</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAyOcYQmrUZiRTkZD33sBhThSYG2nKbTfLUqOyuY0R-KaU9CNsSxQHWg8je-XfTEMamlZKbXxG4Z752A"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.4.2");
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
function setPosition(position) {
console.log("setPosition: lat: " + position.coords.latitude + " lng: " + position.coords.longitude );
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
console.log("Map: " + map);
map.setCenter(location, 13);
addMarker(location, "msg");
}
function addMarker(location, msg) {
var marker = new google.maps.Marker({
position: location,
map: map,
title: msg
});
}
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$("#setcenter").bind("click", function(e){
console.log("bind click");
navigator.geolocation.getCurrentPosition(setPosition);
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setPosition);
} else {
alert("navigator.geolocation not available.");
}
// detectBrowser();
navigator.geolocation.getCurrentPosition(setPosition);
});
</script>
</head>
<body >
<h1>Warning the SQLite poo storage db is not installed yet.</h1>
<h2>This means you have to never reload the page to record all the necessary poo data.</h2>
<div>Where in the world does my dog poo?</div>
<div>Use the geolocation information to mark the spots your dog marks, with optional quality indicator.</div>
<form name="controls">
<div>Quality: </div>
<input type="radio" name="quality" value="1">1</input>
<input type="radio" name="quality" value="2">2</input>
<input type="radio" name="quality" value="3">3</input>
<input type="radio" name="quality" value="4">4</input>
<input type="radio" name="quality" value="5">5</input>
<button name="setcenter" id="setcenter">Mark!</button>
</form>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
No comments:
Post a Comment