Another last minute post. Attempting to save marker data as JSON array in a Cookie in a jQuery friendly way. I ran out of time to test the code. In theory it should work.
Preview URL
<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" src="jquery.cookies.2.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var markers = [];
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, "Quality: " + $("input[name='quality']:checked").val() + "Date: " + new Date());
}
function addMarker(location, msg) {
var marker = new google.maps.Marker({
position: location,
map: map,
title: msg
});
markers.push(marker);
$.cookies.set('dogdata', markers);
}
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';
}
}
if( !$.cookies.test() )
{
alert("Please enable cookies for this program to track very important information");
}
//if not created create cookie data
//find and display existing markers
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" checked="checked">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>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment