Estoy creando una app con JQuery Mobile y Dreamweaver. No soy programador ni de sistemas computacionales. El código realmente es muy difícil para mi, sin embargo, dando tumbos y buscándole he logrado hacer funcionar casi todo, pero al llegar a poner un mapa con el "Google Maps API V3" al parecer funciona correctamente. El mapa inicia en el punto donde quiero y muestra los 3 marcadores que le puse. Si inicio en esa página no hay problema, pero si inicio la carga del sitio en otra página, al dar click al link para ir a la página del mapa me aparecen los marcadores, pero el fondo me aparece en gris y el punto central que quiero que aparezca aparece movido. Si le doy reload a la página ya se muestra bien, pero no es el caso. Debería poder mostrarse bien desde la primera vez. ¿Hay alguien a quién le haya sucedido esto que pudiera ayudarme? Muchas gracias por tomarse la molestia de leer mi duda.
El link de la muestra es el siguiente:
http://www.sugoidg.com/mapa
El código que usé fue este:
Código:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="jquery-mobile/themes/inmobiliaria.css" />
<link rel="stylesheet" href="jquery-mobile/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="CSS/custom.css" />
<script src="jquery-mobile/jquery-1.11.3.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
<!-- JS Mapa -->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="map/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<!-- /JS Mapa -->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="map/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
<!-- /Mapa -->
<script type="text/javascript">
function inicializar_mapa() {
var mapOptions = {
center: new google.maps.LatLng(19.180012, -96.131325),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapa_div"),
mapOptions);
var pos1 = new google.maps.LatLng(19.198900, -96.139865);
var marker1 = new google.maps.Marker({
position: pos1,
map: map,
title:"Marcador 1",
animation: google.maps.Animation.DROP
});
var pos2 = new google.maps.LatLng(19.168242, -96.123906);
var marker2 = new google.maps.Marker({
position: pos2,
map: map,
title:"Marcador 2",
animation: google.maps.Animation.DROP
});
var pos3 = new google.maps.LatLng(19.151799, -96.107164);
var marker3 = new google.maps.Marker({
position: pos3,
map: map,
title:"Marcador 3",
animation: google.maps.Animation.DROP
});
}
</script>
</head>
<body onload="inicializar_mapa()">
<div data-role="page" id="nosotros" data-theme="a">
<!-- /header -->
<div data-role="header" data-position="fixed" data-theme="g">
<h1>Map</h1>
</div><!-- /end header -->
<div data-role="content"><a href="#pag2" data-role="button">Botón</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>Pie</h4>
</div>
</div>
<div data-role="page" id="pag2" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="g">
<h1>Map</h1>
</div>
<div id="mapa_div" style="width:100%; height:200px;" data-role="content">
</div>
<div data-role="content">
Hola
</div><!-- /end map -->
<div data-role="footer" data-position="fixed">
<h4>Pie</h4>
</div>
</body>
</html>
