Cordova with Google Maps throws "Update Google Play Services"

Question

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:

Duplicate? http://stackoverflow.com/questions/35476182/updating-google-play-services-in-emulator — 0xcaff, Nov 28 '16 at 22:11
@caffinatedmonkey no, is not duplicate, beacuse this is a cordova project and meaby the problem is a plugin bad installed — Vladimir Venegas, Nov 28 '16 at 23:46

score 0 · Accepted Answer · answered Nov 29 '16 at 16:36

Ok, finally i get a solution.

In android emulated device: Settings > Apps > Google Play Services; get app version. In my case, was 9.8.77
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
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.

score 0 · Answer 2 · edited May 23 '17 at 12:01

You might want to try creating an AVD for each API level that your app could potentially support based on the setting in your manifest as recommended in System image in create and manage virtual devices.

Further discussion in Viewing and Managing Your AVDs also states that you might also need to recreate a defined AVDs or duplicate them, if you defined AVDs for Android Emulator 24.0.x or lower.

Here are the steps to create an AVD starting with a copy:

From the Your Virtual Devices page of the AVD Manager, right-click an AVD and select Duplicate. Or click Menu and select Duplicate.

The Verify Configuration page appears.

Click Change or Previous if you need to make changes on the System Image and Select Hardware pages.

Make your changes, and then click Finish. The AVD appears in the Your Virtual Devices page.

Solutions given in the following related SO posts might also help:

Cordova with Google Maps throws "Update Google Play Services"

2 Answers2