Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 9853fa9

Browse files
author
scottjehl
committed
added a quick google maps example - needs some more love when we have time!
1 parent bc09540 commit 9853fa9

File tree

4 files changed

+100
-0
lines changed

4 files changed

+100
-0
lines changed

experiments/google-maps/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Main Page</title>
6+
<link rel="stylesheet" href="../../themes/default" />
7+
<script src="../../js"></script>
8+
9+
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
10+
11+
12+
</head>
13+
<body>
14+
15+
<div data-role="page">
16+
<div data-role="header"><h1>Google maps view</h1></div>
17+
<div data-role="content">
18+
<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>
19+
</div>
20+
</div>
21+
22+
</body>
23+
</html>

experiments/google-maps/map.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }

experiments/google-maps/map.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Main Page</title>
6+
<link rel="stylesheet" href="../../themes/default" />
7+
<script src="../../js"></script>
8+
9+
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
10+
11+
12+
</head>
13+
<body>
14+
15+
<div data-role="page" class="page-map">
16+
<script src="map.js"></script>
17+
<link rel="stylesheet" href="map.css" />
18+
19+
<div data-role="header"><h1>Map View</h1></div>
20+
<div data-role="content">
21+
<div id="map-canvas">
22+
<!-- map loads here... -->
23+
</div>
24+
</div>
25+
</div>
26+
27+
</body>
28+
</html>

experiments/google-maps/map.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
//thx @elroyjetson for the code example
3+
4+
// When map page opens get location and display map
5+
$('.page-map').live("pagecreate", function() {
6+
7+
//boston :)
8+
var lat = 42.35843,
9+
lng = -71.059773;
10+
11+
//try to get GPS coords
12+
if( navigator.geolocation ) {
13+
14+
//redirect function for successful location
15+
function gpsSuccess(pos){
16+
if( pos.coords ){
17+
lat = pos.coords.latitude;
18+
lng = pos.coords.longitude;
19+
}
20+
else{
21+
lat = pos.latitude;
22+
lng = pos.longitude;
23+
}
24+
}
25+
26+
function gpsFail(){
27+
//Geo-location is supported, but we failed to get your coordinates. Workaround here perhaps?
28+
}
29+
30+
navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 300000});
31+
}
32+
33+
/*
34+
if not supported, you might attempt to use google loader for lat,long
35+
$.getScript('http://www.google.com/jsapi?key=YOURAPIKEY',function(){
36+
lat = google.loader.ClientLocation.latitude;
37+
lng = google.loader.ClientLocation.longitude;
38+
});
39+
*/
40+
41+
var latlng = new google.maps.LatLng(lat, lng);
42+
var myOptions = {
43+
zoom: 10,
44+
center: latlng,
45+
mapTypeId: google.maps.MapTypeId.ROADMAP
46+
};
47+
var map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);
48+
});

0 commit comments

Comments
 (0)