How to display weather for current googlemaps location (cordova android)?

M

maryoleksiuk2014-08-07 15:08:37

JavaScript

maryoleksiuk, 2014-08-07 15:08:37

How to display temperature + cloud cover for current location? I tried through Google layers, it doesn’t fit .. Tell me alternative solutions, because I’m working with this for the first time. Thanks
My map display 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" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=weather&sensor=true"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/weather.js"></script>

        <title>TestMap</title>
        <script type="text/javascript">
            function onLoad() {
                document.addEventListener("deviceready", onDeviceReady, false);
            }

            function onDeviceReady() {
                navigator.geolocation.getCurrentPosition(onSuccess, onError);
            }

            //GEOLOCATION
            var onSuccess = function(position) {
                var myLat = position.coords.latitude;
                var myLong = position.coords.longitude;
                var pos = new google.maps.LatLng(myLat, myLong);

                //MAP
                var mapOptions = {
                    center: pos,
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                
                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    title: 'i am here'
               });
                                
                //Geocoding
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({'location': pos},
                    function(results, status){
                        if(status == google.maps.GeocoderStatus.OK) {
                            var popOpts = {
                                content : results[1].formatted_address,
                                position : pos
                            };
                            var popup = new google.maps.InfoWindow(popOpts);
                            google.maps.event.addListener(marker, 'setTimeout', setTimeout (function() {
                                popup.open(map, marker)}, 200));
                            }
                        else {
                            alert('Geocoder failed due to: ' + status);
                        }
                    }); 
                };
            
            // onError Callback receives a PositionError object
            //
            function onError(error) {
                alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
            }
            

    </script>
    </head>
    
    <body onload="onLoad()">
        <h3 id="testmap">TestMap</h3>
        <div id="map_canvas"></div>   
    </body>
</html>