Hi,
[js]<script>
function initialize() {
var route1Latlng = new google.maps.LatLng(-33.7610590,18.9616790);
var mapOptions = {
center: route1Latlng,
zoom: 11,
//mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.ajax({
type: "GET",
url: "gpx/verde.gpx",
dataType: "xml",
success: function (xml) {
var points = [];
var bounds = new google.maps.LatLngBounds();
$(xml).find("trkpt").each(function () {
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
var p = new google.maps.LatLng(lat, lon);
//var fir = $(xml).find("trkpt").first();
points.push(p);
bounds.extend(p);
});
var poly = new google.maps.Polyline({
// use your own style here
path: points,
//strokeColor: "#FF00AA",
strokeColor: "#FF8C00",
strokeOpacity: .7,
strokeWeight: 4
});
poly.setMap(map);
var ultima = new google.maps.LatLng(42.91531719280666,-2.470710675732448);
var first = $(xml).find("trkpt").first();
var last = $(xml).find("trkpt").last();
var firstlat = first.attr("lat");
var firstlon = first.attr("lon");
var lastlat = last.attr("lat");
var lastlon = last.attr("lon");
var firstp = new google.maps.LatLng(firstlat, firstlon);
var lastp = new google.maps.LatLng(lastlat, lastlon);
var marker = new google.maps.Marker({
position: firstp,
map: map,
title: 'Salida'
});
var marker = new google.maps.Marker({
position: lastp,
map: map,
title: 'Llegada'
});
// fit bounds to track
map.fitBounds(bounds);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>[/js]
This is part of th html to load the map:
[html]<body onload="initialize()">
<div id="map_canvas"></div>
</body>[/html]
And these are the scripts in "head" to load libraries
:
[html]<style type="text/css">
html, body, #map_canvas { width: 100%; height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>[/html]
The problem comes when loaded with jquery mobile, with page-role. I have seen that you have to call it differently, not onload. I've tried 2 different ways but I can not see the map, do not charge anything. I show both ways.
This is the page of the map:
[html]<div data-role="page" id="map-page" data-title="map-page" style="width:100%; height:100%; margin: 0; padding: 0" >
<div data-role="header">
<h1>Ruta</h1>
<a data-role="button" href="#portfolio" data-transition="flip" data-icon="arrow-l" data-corners="false">Back</a>
</div>
<div data-role="content">
<div id="map_canvas" style="width:100%; height:100%; margin: 0; padding: 0"></div>
</div>
<div data-role="footer">
<h2>Mobile</h2>
<p class="copyright">© 2014</p>
</div>
</div>[/html]
These are the scripts. I have tried with:
[js]$('#map-page').live("pageinit", function (event) {
alert('Entra".');
initialize();
});[/js]
I also tested with:
[js]
$(document).on("pageinit", "#map-page", function() {
alert('Entra');
initialize();
});
[/js]
And following the function initialize. But nothing its load. Join the call, and jumping the "alert", but the "content" I leave it empty, do not load the map.
These are files that I load in "head", if you see something missing:
[html]
<head><title>Mobile Portfolio</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<link href="css/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet">
<link href="css/jquery.mobile.theme-1.2.0.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
<script src="js/script.js"></script>
<head>
[/html]
I need help as soon as possible. I've been testing alternatives several hours but no longer where the judgment will come. Thank you very much beforehand. Regards