Google maps implementation in Nativescript-vue


#1

Does anyone have a follow up guide on how to do this?


#2

Same issue… any help?


#3

Not really… I used MapBox instead which I then used to call Google Maps.


#4

Which steps do you follow? Any tutorial or link?

Thanks!


#5

Take a look at these links =>


#6

Thanks! I’ll try it.!

All examples don’t have a Vue Example, all examples are in Angular :frowning:


#7

Yeah I know, but the implementation in vue is quite close to that in Angular


#8

please any tutorial on that?


#9

This isn’t a tutorial per se, but I got it working as follows. There are probably more correct ways to do this, but I found these changes described in different places on the web and putting them together like this does give me a working google maps native app.

In template/app/App_Resources/Android/values/nativescript_google_maps_api.xml

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

In template/app/App_Resources/Android/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" />
    <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" 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>

In main.js

import * as platform from 'tns-core-modules/platform'

if (platform.isIOS) {
    GMSServices.provideAPIKey(your_api_key_here);
}

// This "unused" import is actually required for the map view to render
import { MapViewBase } from 'nativescript-google-maps-sdk/map-view-common';
Vue.registerElement('MapView', ()=> require('nativescript-google-maps-sdk').MapView)