search

dapriett / nativescript-google-maps-sdk

Cross Platform Google Maps SDK for Nativescript
MIT License
244 stars 164 forks source link

Error setting up GoogleMaps API key when using with VueJS. #296

Open fran8narf opened 6 years ago

fran8narf commented 6 years ago

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_apikey.xml `<?xml version="1.0" encoding="utf-8"?>

Here I have my the API-KEY without quotes ` Then I add the piece of code in the **_AndroidManifest.xml_** file: `` Probably I'm missing something... Hope you can help me!
saul-jb commented 6 years ago

You should post your error code...

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

fran8narf commented 6 years ago

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 commented 6 years ago

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 `

` _**AndroidManifest.xml**_ ` ` _**nativescript_google_maps_api.xml**_ still the same. Thanks!
saul-jb commented 6 years ago

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

fran8narf commented 6 years ago

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

saul-jb commented 6 years ago

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 commented 6 years ago

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:

` <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="PACKAGE" android:versionCode="1" android:versionName="1.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.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>

`