added a quick google maps example - needs some more love when we have time!

scottjehl · scottjehl · commit 9853fa925290 · 2010-12-01T11:55:35.000-05:00
diff --git a/experiments/google-maps/index.html b/experiments/google-maps/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+	<meta charset="UTF-8">
+	<title>Main Page</title>
+	<link rel="stylesheet" href="../../themes/default" />
+	<script src="../../js"></script>
+	
+	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+
+	
+</head>
+<body>
+
+	<div data-role="page">
+		<div data-role="header"><h1>Google maps view</h1></div>
+		<div data-role="content"> 
+			<p>If you're linking to a map page with jQuery Mobile's Ajax behavior, be sure to load google maps in the first real page's head, since it uses document.write and can not be included in the data-role=page div like normal scripts can. <a href="map.html?">View map</a></p>
+		</div>
+	</div>
+	
+</body>
+</html>
diff --git a/experiments/google-maps/map.css b/experiments/google-maps/map.css
@@ -0,0 +1 @@
+.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }
diff --git a/experiments/google-maps/map.html b/experiments/google-maps/map.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+	<meta charset="UTF-8">
+	<title>Main Page</title>
+	<link rel="stylesheet" href="../../themes/default" />
+	<script src="../../js"></script>	
+	
+	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+	
+	
+</head>
+<body>
+
+	<div data-role="page" class="page-map">
+		<script src="map.js"></script>
+		<link rel="stylesheet" href="map.css" />
+		
+		<div data-role="header"><h1>Map View</h1></div>
+		<div data-role="content"> 
+			<div id="map-canvas">
+				<!-- map loads here... -->
+			</div>
+		</div>
+	</div>
+	
+</body>
+</html>
diff --git a/experiments/google-maps/map.js b/experiments/google-maps/map.js
@@ -0,0 +1,48 @@
+
+//thx @elroyjetson for the code example
+
+// When map page opens get location and display map
+$('.page-map').live("pagecreate", function() {
+
+	//boston :)
+	var lat = 42.35843,
+		lng = -71.059773;
+	
+	//try to get GPS coords
+	if( navigator.geolocation ) {
+			
+		//redirect function for successful location	
+		function gpsSuccess(pos){
+			if( pos.coords ){ 
+				lat = pos.coords.latitude;
+				lng = pos.coords.longitude;
+			}
+			else{
+				lat = pos.latitude;
+				lng = pos.longitude;
+			}
+		}	
+		
+		function gpsFail(){
+			//Geo-location is supported, but we failed to get your coordinates. Workaround here perhaps?
+		}
+		
+		navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 300000});
+	}
+
+	/*
+	if not supported, you might attempt to use google loader for lat,long
+	$.getScript('http://www.google.com/jsapi?key=YOURAPIKEY',function(){
+		lat = google.loader.ClientLocation.latitude;
+		lng = google.loader.ClientLocation.longitude;
+	});			
+	*/
+
+	var latlng = new google.maps.LatLng(lat, lng);
+	var myOptions = {
+		zoom: 10,
+		center: latlng,
+		mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+    var map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }`