How to test cordova googlemaps app on android device?

M

maryoleksiuk2014-08-06 09:23:50

JavaScript

maryoleksiuk, 2014-08-06 09:23:50

I wrote an app that uses geolocation and the current location of the user on cordova. Tested in the browser - everything works. An empty cordova project on an android device also works. When I pasted the script and body into index.html the application just got a gray screen when testing. Do you have any idea why?
Here is the code with body

<body onload="geoloc()">
    <div id="divmap"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>

Thank you very much!
The code

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <style>
            html, body, #divmap{
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>

        <script>
            var watchId = null;
            function geoloc() {
                if (navigator.geolocation) {
                    // Get the user's current position
                    var optn = {
                        enableHighAccuracy : true,
                        timeout : Infinity,
                        maximumAge : 0
                    };
                watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);
                } else {
                    alert('Geolocation is not supported in your browser');
                }
                }
 
            function showPosition(position) {
                var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var mapOptions = {
                    zoom : 12,
                    center : googlePos,
                    mapTypeId : google.maps.MapTypeId.ROADMAP
                };
                
                
                    
                var mapObj = document.getElementById('divmap');
                var googleMap = new google.maps.Map(mapObj, mapOptions);    
    
                
                var markerOpt = {
                    map : googleMap,
                    position : googlePos,
                    title : 'Hi , I am here',
                    animation : google.maps.Animation.DROP
                };
                
                var googleMarker = new google.maps.Marker(markerOpt);
                
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    'latLng' : googlePos
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                            if (results[1]) {
                                var popOpts = {
                                    content : results[1].formatted_address,
                                    position : googlePos
                                };
                                var popup = new google.maps.InfoWindow(popOpts);
                                
                                                                       
                                /*google.maps.event.addListener(googleMap, 'center_changed', function(){
                                    window.setTimeout(function(){
                                        googleMap.panTo(googleMarker.getPosition());
                                    }, 2000);
                                
                                });*/
                                                                
                                google.maps.event.addListener(googleMarker, 'setTimeout', setTimeout (function() {
                                    popup.open(googleMap, googleMarker)}, 200));
                                
                            } else {
                                alert('No results found');
                            }
                    } else {
                        alert('Geocoder failed due to: ' + status);
                    }
                });
                
               var weatherLayer = new google.maps.weather.WeatherLayer({
                  temperatureUnits: google.maps.weather.TemperatureUnit.Celsius
                });
                weatherLayer.setMap(googleMap);

                var cloudLayer = new google.maps.weather.CloudLayer();
                cloudLayer.setMap(googleMap);
                

            }
            
            function showError(error) {
                var err = document.getElementById('divmap');
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        err.innerHTML = "User denied the request for Geolocation."
                        break;
                    case error.POSITION_UNAVAILABLE:
                        err.innerHTML = "Location information is unavailable."
                        break;
                    case error.TIMEOUT:
                        err.innerHTML = "The request to get user location timed out."
                        break;
                    case error.UNKNOWN_ERROR:
                        err.innerHTML = "An unknown error occurred."
                        break;
                }
        }
            
       </script>
  </head>
  <body onload="geoloc()">
    <div id="divmap"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

P

Push Pull, 2014-08-06
@maryoleksiuk

turn on the telepath.
you probably don't want to handle the deviceready event, which is called when everything that is needed for the application to work is loaded
document.addEventListener('deviceready', app.initialize);