I want to load a local jqmobile html file into a webview. I am able to open it using ALL browsers (includes Android) but not using webview. It does not generate any error, however, content (google map v3) does not appear and javascripts are not triggered!! Please help 🙁
<uses-library android:name="com.google.android.maps" /> on my manifest and also all permissions.
webview activity,
browse = (WebView) findViewById(R.id.webview1);
browse.getSettings().setJavaScriptEnabled(true);
browse.getSettings().setUseWideViewPort(true);
browse.getSettings().setLoadWithOverviewMode(true);
browse.setWebChromeClient(new WebChromeClient());
browse.setWebViewClient(new WebViewClient());
browse.loadUrl("file:///data/data/" + PACKAGE_NAME + view1 + ".html");
jqmobile html file,
<!DOCTYPE wml>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Geolocation</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
<style type="text/css">
html { height: 100%; width:100%;}
body { height: 100%;; margin: 0px; padding: 0px; }
#mapDiv { height: 100%; width:100% }
</style>
</head>
<body >
<div data-role="page" style="height: 100%; width:100%;">
<div data-role="header">
<h1>Localización</h1>
</div>
<div data-role="content" id="mapDiv">
<script language="javascript" type="text/javascript">
var xmlDoc=null;
var xmlHttp=null;
var locations=new Array();
var infowindow = new google.maps.InfoWindow();
var marker, i;
alert("llegint location...");
ConectarLectura();
if (xmlDoc!=null){
var x=xmlDoc.getElementsByTagName("location");
for(i=0;i<x.length;i++){
var punto= new Array();
var item = xmlDoc.getElementsByTagName('location')[i];
var txt = item.getElementsByTagName('nombre')[0];
punto[0]=txt.firstChild.data;
var txt = item.getElementsByTagName('cuerpohtml')[0];
punto[1]=txt.firstChild.data;
var txt = item.getElementsByTagName('latitud')[0];
punto[2]=txt.firstChild.data;
var txt = item.getElementsByTagName('longitud')[0];
punto[3]=txt.firstChild.data;
var txt = item.getElementsByTagName('icono')[0];
punto[4]=txt.firstChild.data;
punto[4]=punto[4].slice(59,punto[4].length);
punto[4]="../../"+punto[4];
locations[i]=punto;
}
}
function ConectarLectura(){
var docdatos=self.location.href.match( /\/([^/]+)$/ )[1];
docdatos=docdatos.substring(0,docdatos.lastIndexOf("."));
docdatos=docdatos+".xml";
alert(docdatos);
xmlDoc=null;
var d= new Date();
var locXML=docdatos+"?"+d.toString();
if (window.ActiveXObject){//Internet Explorer
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("GET",locXML,false);
xmlHttp.send();
xmlDoc = xmlHttp.responseXML;
}
else if (document.implementation.createDocument){ //Otros navegadores
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET",locXML,false);
xmlHttp.send(null);
xmlDoc = xmlHttp.responseXML;
}
else{ //Navegadores no compatibles
alert('Browser cannot handle this script');
}
}
if(navigator.geolocation) {
function hasPosition(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
myOptions = {
zoom: 20,
center: point,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
mapDiv = document.getElementById("mapDiv"),
map = new google.maps.Map(mapDiv, myOptions),
marker = new google.maps.Marker({
position: point,
map: map,
title: "Se encuentra aqui",
});
for (i = 0; i < locations.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
icon : locations[i][4]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
//Función para añadir nuevos markers
google.maps.event.addListener(map, 'click', function(event) {
parent.parent.anadePunto(event.latLng);
});
}
navigator.geolocation.getCurrentPosition(hasPosition);
}
</script>
</div>
</div>
</body>
</html>
Are you using local storage? Otherwise: settings.setDomStorageEnabled(true);