Error setting up GoogleMaps API key when using with VueJS.

[fran8narf]

Hello everybody!

I'm getting an error when I try to set the the api key in the xml files as in the documentation.
nativescript_googlemaps_api_key.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="nativescript_google_maps_api_key">Here I have my the API-KEY without quotes</string> </resources>

Then I add the piece of code in the AndroidManifest.xml file:
<meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/nativescript_google_maps_api_key" />

Probably I'm missing something...
Hope you can help me!

[saul-jb]

You should post your error code...

Try follow the steps under npm here: https://organicdesign.nz/User:Saul/nativescript#npm

[fran8narf]

Sorry, here it is:

`
An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:

Error calling module function

Error: Module build failed: SyntaxError: Unexpected token (10:17)

[0m [90m 8 | [39m
[90m 9 | [39m [36mimport [39m [33m* [39m as platform from [32m"platform" [39m [33m; [39m
[31m [1m> [22m [39m [90m 10 | [39m [36mconst [39m [33mGMSServices [39m [33m: [39m any [33m; [39m
[90m | [39m [31m [1m^ [22m [39m
[90m 11 | [39m
[90m 12 | [39m [36mif [39m (platform [33m. [39misIOS) {
[90m 13 | [39m [33mGMSServices [39m [33m. [39mprovideAPIKey( [32m"APIKEY" [39m) [33m; [39m [0m

File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 1, column: 539

StackTrace:
Frame: function:'21', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 546
Frame: function:'n', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 161
Frame: function:'21', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 511
Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 521
Frame: function:'require', file:'', line: 1, column: 266

Error: Module build failed: SyntaxError: Unexpected token (10:17)

[0m [90m 8 | [39m
[90m 9 | [39m [36mimport [39m [33m* [39m as platform from [32m"platform" [39m [33m; [39m
[31m [1m> [22m [39m [90m 10 | [39m [36mconst [39m [33mGMSServices [39m [33m: [39m any [33m; [39m
[90m | [39m [31m [1m^ [22m [39m
[90m 11 | [39m
[90m 12 | [39m [36mif [39m (platform [33m. [39misIOS) {
[90m 13 | [39m [33mGMSServices [39m [33m. [39mprovideAPIKey( [32m"APIKEY" [39m) [33m; [39m [0m

File: ", line: 1, column: 265

StackTrace:
Frame: function:'21', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 546
Frame: function:'n', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 161
Frame: function:'21', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 511
Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 521
Frame: function:'require', file:'', line: 1, column: 266

at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5830)
at android.app.ActivityThread.-wrap1(Unknown Source:0)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1673)
at android.os.Handler.dispatchMessage(Handler.java:105)
at android.os.Looper.loop(Looper.java:172)
at android.app.ActivityThread.main(ActivityThread.java:6637)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
Caused by: com.tns.NativeScriptException:

Error calling module function

Error: Module build failed: SyntaxError: Unexpected token (10:17)

[0m [90m 8 | [39m
[90m 9 | [39m [36mimport [39m [33m* [39m as platform from [32m"platform" [39m [33m; [39m
[31m [1m> [22m [39m [90m 10 | [39m [36mconst [39m [33mGMSServices [39m [33m: [39m any [33m; [39m
[90m | [39m [31m [1m^ [22m [39m
[90m 11 | [39m
[90m 12 | [39m [36mif [39m (platform [33m. [39misIOS) {
[90m 13 | [39m [33mGMSServices [39m [33m. [39mprovideAPIKey( [32m"APIKEY" [39m) [33m; [39m [0m

File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 1, column: 539

StackTrace:
Frame: function:'21', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 546
Frame: function:'n', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 161
Frame: function:'21', file:'file:///data/data/org.nativescr
ipt.application/files/app/app.js', line: 1, column: 511
Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 521
Frame: function:'require', file:'', line: 1, column: 266

Error: Module build failed: SyntaxError: Unexpected token (10:17)

[0m [90m 8 | [39m
[90m 9 | [39m [36mimport [39m [33m* [39m as platform from [32m"platform" [39m [33m; [39m
[31m [1m> [22m [39m [90m 10 | [39m [36mconst [39m [33mGMSServices [39m [33m: [39m any [33m; [39m
[90m | [39m [31m [1m^ [22m [39m
[90m 11 | [39m
[90m 12 | [39m [36mif [39m (platform [33m. [39misIOS) {
[90m 13 | [39m [33mGMSServices [39m [33m. [39mprovideAPIKey( [32m"APIKEY" [39m) [33m; [39m [0m

File: ", line: 1, column: 265

StackTrace:
Frame: function:'21', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 546
Frame: function:'n', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 161
Frame: function:'21', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 511
Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 521
Frame: function:'require', file:'', line: 1, column: 266

at com.tns.Runtime.runModule(Native Method)
at com.tns.Runtime.runModule(Runtime.java:542)
at com.tns.Runtime.run(Runtime.java:534)
at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1119)
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5827)
... 8 more
`

[fran8narf]

I wasn't placing the metadata tag before de closing application tag in the AndroidManifest.xml file, but I fixed it and keeps throwing the same error.

These are my files right now:
Main.js
`import Vue from 'nativescript-vue';
import router from './router';
import store from './store';
import './styles.scss';
import Gradient from 'nativescript-gradient'

import { MapViewBase } from 'nativescript-google-maps-sdk/map-view-common';

Vue.registerElement('MapView', ()=> require('nativescript-google-maps-sdk').MapView)
Vue.registerElement('Gradient', () => require('nativescript-gradient').Gradient)

// Uncommment the following to see NativeScript-Vue output logs
//Vue.config.silent = false;

new Vue({
router,
store
}).$start();
`

Map.vue
`


<NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.push('/home')"/>

<StackLayout class="hello-world">
  <Label class="body" textWrap=true text="Testing Gmaps API plugin"/>
</StackLayout>
<GridLayout>

  <MapView width="400" height="400" :latitude="lat" :longitude="long" />
	</GridLayout>

<script> import { MapViewBase } from 'nativescript-google-maps-sdk/map-view-common'; import { Position, Marker } from "nativescript-google-maps-sdk"; export default { data () { return { lat: -20, long: 100 } } } </script> <style scoped> Label { text-align: center; } </style>`

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="__PACKAGE__" android:versionCode="10000" android:versionName="1.0.0"> <supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:xlargeScreens="true" /> <uses-sdk android:minSdkVersion="17" android:targetSdkVersion="__APILEVEL__" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <application android:name="com.tns.NativeScriptApplication" android:allowBackup="true" android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/AppTheme"> <activity android:name="com.tns.NativeScriptActivity" android:label="@string/title_activity_kimera" android:configChanges="keyboardHidden|orientation|screenSize" android:theme="@style/LaunchScreenTheme"> <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" /> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.tns.ErrorReportActivity" /> <meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/nativescript_google_maps_api_key" /> </application> </manifest>

nativescript_google_maps_api.xml still the same.

Thanks!

[saul-jb]

It looks like your missing the <template> tags in map.vue

[fran8narf]

I have them, but i didn't copy that part!

[saul-jb]

I can't see the issue from the code you have posted - the code works fine for me, I would have to see full code.

Try running npm run clean and then run it again, this ensures a complete build without caching - which can fix errors appearing from installing a new node module.

[fran8narf]

Hi @saul-avikar,

I managed to solved the issue, it seems that my AndroidManifest.xml file was incomplete. I added several lines that I found and now it works.

This is the file now:

`

<supports-screens
	android:smallScreens="true"
	android:normalScreens="true"
	android:largeScreens="true"
	android:xlargeScreens="true"/>

<uses-sdk
	android:minSdkVersion="17"
	android:targetSdkVersion="__APILEVEL__"/>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

<application
	android:name="com.tns.NativeScriptApplication"
	android:allowBackup="true"
	android:icon="@drawable/icon"
	android:label="@string/app_name"
	android:theme="@style/AppTheme" >
	<activity
		android:name="com.tns.NativeScriptActivity"
		android:label="@string/title_activity_kimera"
		android:configChanges="keyboardHidden|orientation|screenSize">

			<intent-filter>
			<action android:name="android.intent.action.MAIN" />

			<category android:name="android.intent.category.LAUNCHER" />
		</intent-filter>
	</activity>
	<activity android:name="com.tns.ErrorReportActivity"/>

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

`