i'm making an android app with cordova. And a I have a noob problem.
I have a map in the index.html, when the index initializes the app obtains the position of the mobile and later does a map with a marker where the mobile is.
The code is this:
var longitud;
var latitud;
function getPosition() {
var options = {
enableHighAccuracy: true,
maximumAge: 1
}
var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
function onSuccess(position) {
this.latitud = position.coords.latitude;
this.longitud = position.coords.longitude;
navigator.geolocation.clearWatch(watchID);
mapa();
};
function onError(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
}
function mapa() {
alert(this.latitud + ' ' + this.longitud);
document.getElementById("mapa").innerHTML = "";
map = new OpenLayers.Map("mapa");
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(window.longitud, window.latitud).transform(fromProjection, toProjection);
var zoom = 17;
map.addLayer(mapnik);
map.setCenter(position, zoom);
var lonLat = new OpenLayers.LonLat(this.longitud, this.latitud)
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
//markers.icon(img/ico-taxi);
markers.addMarker(new OpenLayers.Marker(lonLat));
}
This works well in the index.html. But in other page i want to do the same thing, but instead of showing always, only show it if the users click the accordion because the users must know where are they but I dont want to have a big map in this page all time. When user open the accordion the app creates a map using the same functions because the div id is the same. This works well too, but additionally i want to put the coordinates inside two inputs: inputLat and Input Lon. When user click the accordion in the inputs appears undefined but in theory were defined in index.html and when he clicks in the accordion. But the most strange thing is that, when I close the accordion and I open it again, the coordinates appears. How I can have the coordinates in the input the first time i clik accordion? I give you the code of the accordion functions.
function comprobar() {
var x = document.getElementById("mapa");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
getPosition();
geoLocalizacion();
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function geoLocalizacion () {
document.getElementById("inputLat").value = this.latitud;
document.getElementById("inputLon").value = this.longitud;
}
I tried to read other similar posts and doesn't work. If I add var Longitud = this; int the declaration it shows [object Window]
javascript returns undefind for a globally declared variable
Why a variable defined global is undefined?
Thanks to all I'm so sure that is a noob thing.