estoy haciendo una aplicación con JS, JQ, JQM, para mostrar unas rutas cargadas desde un archivo gpx.
Probando sin JQM me carga el mapa con la ruta sin problemas, con este código:
Código Javascript :
<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>Este html para cargar el mapa:
Código HTML :
<body onload="initialize()"> <div id="map_canvas"></div> </body>
Y estos son scripts en head para cargar librerias:
Código 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>El problema viene al cargarlo con jquery mobile, con las page-role. He visto que hay que llamarlo de diferente forma, no con onload. He probado con 2 formas diferentes pero no consigo ver el mapa, no carga nada. Os muestro las dos formas.
Así es la página del mapa:
Código 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>
Estos son los scripts. He probado con:
Código Javascript :
$('#map-page').live("pageinit", function (event) {
alert('Entra".');
initialize();
});También he probado con esta llamada:
Código Javascript :
$(document).on("pageinit", "#map-page", function() {
alert('Entra');
initialize();
});
Y seguido de esto la función initialialize. Pero no me carga nada. Entra a la llamada, ya que salta el "alert", pero el "content" me lo deja vacio, no carga el mapa.
Estos son lor archivos que cargo el head, por si veis algo que falte:
Código 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>
Necesito ayuda, lo antes posible. Llevo bastantes horas probando alternativas pero ya no se de donde vendrá el fallo. Muchas gracias antes de nada. Un saludo
