Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-21 06:40:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
scottjehl 2010-12-01 11:55:35 -05:00
parent bc09540492
commit 9853fa9252
4 changed files with 100 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
experiments/google-maps/index.html Normal file
View file

@ -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>

1
experiments/google-maps/map.css Normal file
View file

@ -0,0 +1 @@
.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }

28
experiments/google-maps/map.html Normal file
View file

@ -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>

48
experiments/google-maps/map.js Normal file
View file

@ -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);
});