CODEWITHSUNDEEP
androidgoogle-mapsnativescript
Marcel Kloubert
Marcel Kloubert

Reputation: 85

"nativescript-google-maps-sdk" PlugIn shows blank screen

I have installed nativescript-google-maps-sdk plugin in my NativeScript 2.0 project.

I generated and activated an Android API key at the Google Developer Console.

As described in the documentation of the plugin I added the string resource value nativescript_google_maps_api_key with the API key, but it does not work.

I also tried to add the google_maps_key string resource as described in the official Google documentation, so my resource file looks like this:

<resources>
  <string name="google_maps_key">MY_API_KEY</string>
  <string name="nativescript_google_maps_api_key">MY_API_KEY</string>
</resources>

My last try was to add a meta value to the AndroidManifest.xml file:

<manifest>
  <application>
      ...

      <meta-data android:name="com.google.android.geo.API_KEY"
                 android:value="MY_API_KEY" />
  </application>
</manifest>

In my app.gradle file I added a reference to the com.google.android.gms:play-services-maps:8.3.0 package.

But nothings helps ... I still have a blank screen with a Google logo but no map.

Upvotes: 0

Views: 1539

Answers (4)

RedRight
RedRight

Reputation: 11

I had same problem. After I checked "Use Host GPU", it worked

  1. Open Android Virtual Device (AVD) Manager
  2. Select emulator and click Edit
  3. Check Emulator Options: Use Host GPU

Upvotes: 1

Danno
Danno

Reputation: 1003

If you're having this problem, and everything you try does not seem to do anything, I would recommend checking your Android Logs. 

adb logcat

Check for the following: Google Maps Android API: Google Maps Android API v2 only supports devices with OpenGL ES 2.0 and above

This was my problem. The emulator I was using did not support the stated version of OpenGL. So I created a new emulator, checking off Use Host GPU and that seemed to cure the blank map with logo issue.

I think the Use Host GPU is the key. The old emulator I was using didn't have this option, so I couldn't verify this.

Upvotes: 0

Nick Iliev
Nick Iliev

Reputation: 9670

I have followed the exact steps as shown in the demo app and it worked correctly! Now the first thing I have noticed is that the file with your API-Key is located as follows

App_Resources/Android/values/nativescript-google-maps-api.xml

And looks like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="nativescript_google_maps_api_key">your-api-key-here</string>
</resources>

In the map-page.xml we have

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:maps="nativescript-google-maps-sdk" loaded="pageLoaded">
<GridLayout>
    <maps:mapView latitude="{{ latitude }}" longitude="{{ longitude }}" zoom="{{ zoom }}"/>
</GridLayout>

Keep in mind that in the demo the author has passed the params via view-model but you can always hardcore the values for latitude ,longitude and zoom for test pourposes. And thats all that is needed in order for the plugin to work.

Upvotes: 0

Nikolay Tsonev
Nikolay Tsonev

Reputation: 1919

I was unable to run this plugin correctly, maybe it is not compatible with NativeScript 2.0. However you could use official NativeScript plugin nativescript-geolocation or nativescript-googleMaps, which work normal on both iOS and Android. You could read more about the plugin here: NativeScript Location

Also you could review this sample app with nativescript-googleMaps location To upgrade the project to latest NS 2.0. run npm install tns-core-modules@latest --save

Indeed you should add this line

<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="API_KEY" />

before </application> closing tag in AndroidManifest.xml

Upvotes: 0

Related Questions