Search code examples
cordovagoogle-play-servicescordova-pluginsandroid-virtual-device

Cordova with Google Maps throws "Update Google Play Services"

I am starting with cordova and google map plugin. I installed Java and android studio.

Also, I downloaded a google api image for API 25 and I configured an AVD image too.

My problem is when I run my virtual device, I am getting "Update Google Play Services" message. And, as you can see, maps default application is working fine (see screenshot)

I added this plugins:

My code looks like this:

<html>
    <head>        
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p id="result" class="event received">Hi!</p>

            </div>
        </div>
        <div style="width:100%;height:400px" id="map_canvas"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

My javascript is the following:

var map;
var app = {

    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    onDeviceReady: function() {
        this.receivedEvent('deviceready');

        // onSuccess Callback        
        var onSuccess = function(position) {
            var el = document.getElementById("result");
            el.innerHTML = 'Latitude: ' + position.coords.latitude;


            var div = document.getElementById("map_canvas");

            // Initialize the map view
            map = plugin.google.maps.Map.getMap(div);

            // Wait until the map is ready status.
            map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
                var button = document.getElementById("button");
                //button.addEventListener("click", onBtnClicked);
            });
        }

        // onError Callback receives a PositionError object
        function onError(error) {
            var el = document.getElementById("result");
            el.innerHTML = 'code: ' + error.code + 'message: ' + error.message;            
        }

        navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 30000, enableHighAccuracy: true, maximumAge: 60000 });
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

Some screenshot: SDK Manager Extras

enter image description here error

Maps

Solution

  • Ok, finally i get a solution.

    1. In android emulated device: Settings > Apps > Google Play Services; get app version. In my case, was 9.8.77
    2. In -android sdk folder-\extras\google\m2repository\com\google\android\gms\play-services-maps, get the max version iqual or less than the installed version. In my case was 9.8.0
    3. In -project folder-\platforms\android\project.properties, change this:

    cordova.system.library.1=com.google.android.gms:play-services-maps:+ cordova.system.library.2=com.google.android.gms:play-services-location:+

    For

    cordova.system.library.1=com.google.android.gms:play-services-maps:9.8.0 cordova.system.library.2=com.google.android.gms:play-services-location:9.8.0

    Where "9.8.0" is the version obtained in point 2.