I am making a page for my cross platform mobile app that will show several markers. My map page is working fine when loaded directly but when I access it from another page in my mobile app (while testing on desktop in Chrome and Firefox) the map page will not show, only the header and footer show. I have searched for this issue online and some say it may be that when the page is directly loaded everything on the page loads but when the page is accessed via a link on another page, it only loads part of the page and this is why it is not displaying. I have tried moving my Javascript map code into the body, just after the opening body tag, just before the closing body tag, as well as putting my code is a separate JS file and calling it from the head but inothing works. Here is my code:
<!DOCTYPE html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/theme-classic/theme-classic.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="jquery.ui.map.full.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
$(function() {
var yourStartLatLng = new google.maps.LatLng(52.842659, -9.438168);
$('#map_canvas').gmap({'center': yourStartLatLng});
$('#map_canvas').gmap('option', 'zoom', 9);
var markers = ["53.120473", "-9.289028", "53.016460", "-9.413131", "53.014498", "-9.406779", "52.979603", "-9.431970", "52.935628", "-9.351032", "52.931089", "-9.349707", "52.928521", "-9.350962", "52.925986", "-9.352743", "52.922609", "-9.354438", "52.915720", "-9.368386", "52.881534", "-9.438011", "52.840389", "-9.432518", "52.845353", "-9.440865", "52.845729", "-9.448225", "52.849137", "-9.457538", "52.754507", "-9.494177", "52.737048", "-9.607952"];
var spotNames = ["Fanore", " ", "Crab Island", " ", "Doolin", " ", "Aileens", " ", "Lahinch Beach", " ", "Lahinch Left", " ", "Cornish", " ", "Shit Creek", " ", "Cregg", " ", "BarTrá", " ", "Bumbaloids", " ", "Spanish Point Beach", " ", "Spanish Point Inside Reef", " ", "Spanish Point Middle Reef", " ", "Spanish Point Outside Reef", " ", "Doughmore Beach", " ", "Rileys", " "];
var markerPos;
for ( var i = 0; i < markers.length; i+=2 ) {
createMarker(i);
}
function createMarker(i) {
markerPos = new google.maps.LatLng( markers[i], markers[i+1]);
$('#map_canvas').gmap('addMarker', { 'position': markerPos, 'bounds': false }).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': spotNames[i] }, this);
});
}
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="mapPage" style="width:100%; height:100%;">
<div data-role="header" data-position="fixed">
<h1>Map</h1>
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
<div data-role="footer" data-position="fixed">
<h1>Map</h1>
</div>
</div>
</body>
</html>
Does anyone know what could be the issue here?
