Multi page layout with Google Maps is unstable
Hi, I am new to jQuery and internet programming and I am slowly working my way through a cross platform app. Unfortunately I cannot get past an issue with google maps within a standard multi page layout. I have looked at a number of similar posts but nothing is working out. My code is below for you to look at. Any help would be greatly appreciated.
- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Map App</title>
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet"> <!-- Google API -->
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="my.js"></script>
<!-- User-generated css -->
<style>
</style>
<!-- User-generated js -->
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
// Geolocation
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: '+ position.coords.latitude + '<br />' +
'Longitude: '+ position.coords.longitude;
var lat = position.coords.latitude;
var lng= position.coords.longitude;
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.282114, -9.0616396),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div id="Home_Head" data-theme="c" data-role="header" data-position="fixed">
<a data-role="button" data-transition="slide" href="#page3" data-icon="gear"
data-iconpos="notext" class="ui-btn-right">
Settings
</a>
<h3>
Home
</h3>
</div>
<p>A dialog box will report the network state.</p>
<div data-role="content">
<div>
<p style="text-align: center;" data-mce-style="text-align: center;">
<b>
<span style="font-family: verdana,geneva; font-size: large;">
<em>
Archaeology on the Go!
</em>
</span>
<br>
</b>
</p>
</div>
<div style=" text-align:center">
<img style="width: 200px; height: 150px" src="http://assets.codiqa.com/AITr7QYSyCxvITw9iJeG_portaldolmen1.jpg">
</div>
<div> <p id="geolocation"><br>Finding geolocation...</p> </div>
<div>
<p style="text-align: left;">
<span style="font-size: small;" data-mce-style="font-size: small;">
Select the button below to search relative to your location
</span>
<br>
</p>
</div>
<a id="FindLocation" data-role="button" data-transition="slide" data-theme="c"
href="#page5" data-icon="arrow-r" data-iconpos="right">Find my location</a>
<div>
<p>
<span style="font-size: small;">Select the button below to search by a location of your choice.</span>
<br>
</p>
</div>
<a id="Browse" data-role="button" data-transition="slide" href="#page3"
data-icon="arrow-r" data-iconpos="right">
Browse by location
</a>
</div>
</div>
<!-- NewMap -->
<div data-role="page" id="page5">
<div id="mapHeader" data-theme="c" data-role="header" data-position="fixed">
<a data-role="button" href="#page3" data-icon="gear" data-iconpos="notext" class="ui-btn-right">Settings</a>
<a data-role="button" data-transition="slide" href="#page1" data-icon="home" data-iconpos="notext" class="ui-btn-left">Home</a>
<h3>Your Location</h3>
</div>
<div data-role="content" style="padding: 0px">
<div id="map-canvas" height="510" width="320"></div>
<!-- Fusion Table Map Embed code -->
<!-- <iframe width="320" height="510" scrolling="no" frameborder="no" src="https://www.google.com/fusiontables/embedviz?viz=MAP&q=select+col0+from+1EPAATemSpLLH-pJoMC2XtApvz7U7AUzJCq0KFTI&h=false&lat=53.28015629094648&lng=-9.058632255473185&z=15&t=1&l=col0"></iframe> -->
<!-- <img src="https://maps.googleapis.com/maps/api/staticmap?center=nui galway&zoom=14&size=320x510&markers=NUI Galway&sensor=false"
height="510" width="320"> -->
</div>
</div>
<!-- Settings -->
<div data-role="page" id="page3">
<div data-theme="c" data-role="header">
<a data-role="button" data-rel="back" data-transition="slide" href="#page5"
data-icon="back" data-iconpos="notext" class="ui-btn-right">
Back
</a>
<a data-role="button" href="#page1" data-icon="home" data-iconpos="notext"
class="ui-btn-left">
Home
</a>
<h3>
Settings
</h3>
</div>
<div data-role="content">
<div>
<p style="text-align: center;" data-mce-style="text-align: center;">
<b>
Select browsing options below.
<br>
</b>
</p>
</div>
<div data-role="collapsible-set" data-theme="b" data-content-theme="b">
<div data-role="collapsible">
<h3>
Search by Townland
</h3>
</div>
<div data-role="collapsible">
<h3>
Search by Monument Type
</h3>
</div>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>
Select Radius option.
</legend>
<input id="radio4" name="Radius" value="500" type="radio">
<label for="radio4">
500m
</label>
<input id="radio5" name="Radius" value="1000" type="radio">
<label for="radio5">
1000m
</label>
<input id="radio6" name="Radius" value="radio6" type="radio">
<label for="radio6">
2500m
</label>
<input id="radio7" name="Radius" value="5000" type="radio">
<label for="radio7">
5000m
</label>
</fieldset>
</div>
<a data-role="button" href="#page5">
View Map results
</a>
</div>
</div>
</body>
</html>