0

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.

Guille
  • 322
  • 1
  • 3
  • 8
  • Because you expect an asynchronous process to be done as soon as you call it.. It is like ordering a pizza and eating it as soon as you hang up the phone. You can not call the second function until onSuccess has run.... – epascarello Aug 22 '17 at 17:57
  • And how I fix this? Why the second time works and the others not? When I open index for first time works correctly – Guille Aug 22 '17 at 18:00
  • because the pizza is sitting in your house already... You need to call the function when the success is run. – epascarello Aug 22 '17 at 18:00
  • So, I have to call the function comprobar() from getPosition()? – Guille Aug 22 '17 at 18:04

0 Answers0