Troubleshooting the issue with NativeScript's integration of the Google Maps SDK

As a Javascript developer specializing in AngularJS and NodeJS, I have limited knowledge of Android or iOS apps. I recently followed a tutorial on Nativescript to create an app using Nativescript (Angular) with the help of this link: Wiring up Google Maps Nativescript plugin with Angular 2. However, after running the command tns run android following the installation of the plugin with tns plugin add nativescript-google-maps-sdk, an exception occurred.

    D:\ts\app\sample-Groceries>tns run android
    Executing before-prepare hook from D:\ts\app\sample-Groceries\hooks\before-prepare\nativescript-dev-typescript.js
    Found peer TypeScript 1.8.10
    Project successfully prepared
    WARNING: The file: D:\ts\app\sample-Groceries\node_modules\nativescript-google-maps-sdk\platforms\android\AndroidManifest.xml is deprecated, you can read more about what will be the expected plugin structure here: https://www.nativescript.org/blog/migrating-n-android-plugins-from-version-1.7-to-2.0
    WARNING: The file: D:\ts\app\sample-Groceries\node_modules\nativescript-google-maps-sdk\platforms\android\res\values\nativescript_google_maps_api.xml is deprecated, you can read more about what will be the expected plugin structure here: https://www.nativescript.org/blog/migrating-n-android-plugins-from-version-1.7-to-2.0

    :config phase:  createDefaultIncludeFiles
            +found plugins: nativescript-google-maps-sdk
     {
                  "F0" {
                    dimension "nativescriptgooglemapssdk"
                  }
                }
    }Renaming plugin directory to flavor name: D:\ts\app\sample-Groceries\platforms\android\src\nativescript-google-maps-sdk
-> D:\ts\app\sample-Groceries\platforms\android\src\F0
            +found plugins: tns-core-modules-widgets
     {
                  "F1" {
                    dimension "tnscoremoduleswidgets"
                  }
                } }Renaming plugin directory to flavor name: D:\ts\app\sample-Groceries\platforms\android\src\tns-core-modules-widgets
 D:\ts\app\sample-Groceries\platforms\android\src\F1

    :config phase:  createPluginsConfigFile
             Creating product flavors include.gradle file in D:\ts\app\sample-Groceries\platforms\android/configurations folder...

    :config phase:  pluginExtend
            +applying configuration from: D:\ts\app\sample-Groceries\platforms\android\configurations\include.gradle
            +applying configuration from: D:\ts\app\sample-Groceries\platforms\android\configurations\nativescript-google-maps-sdk\include.gradle
            +applying configuration from: D:\ts\app\sample-Groceries\platforms\android\configurations\tns-core-modules-widgets\include.gradle

    :config phase:  copyAarDependencies

    :config phase:  addAarDependencies
            +adding dependency: D:\ts\app\sample-Groceries\platforms\android\libs\aar\widgets-release.aar

    FAILURE: Build failed with an exception.

Despite visiting the page , I was unable to find information to resolve this exception.

javascriptangularjsgoogle-mapsgoogle-maps-android-api-2nativescript

Answer №1

One solution is to try removing the android platform by running tns platform remove android, and then adding it back in with tns platform add android.

Regarding the nativescript-google-maps-sdk plugin, I have created a sample project using this plugin from scratch. You can check it out here: NativeScript-Angular-GoogleMaps. An important step is to include the following code snippet in 

NativeScript-Angular-GoogleMaps/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">API_KEY</string>
</resources>

and also to add this line at the end of the file 

node_modules/nativescript-angular/element-registry.js

this line

registerElement("mapView", function () { return require("nativescript-google-maps-sdk").MapView; });

This addition will allow NativeScript to recognize the MapView element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the correct method for completely eliminating a mesh from the three.js scene?

I am looking for a way to fully remove meshes from a three.js scene without causing any memory leaks. I have noticed that reloading the same models multiple times can lead to browser crashes, indicating that memory is not being properly deallocated. ...

javascriptthree.js

Flask is having trouble loading images within the static directory

I am facing an issue with loading two images in my HTML when the 'next' button is clicked. Initially, everything was working fine before I integrated the front end with Flask. The CSS and JS files are functioning properly, but the images are not ...

javascripthtmljquerycssflask

How can I add both the keys and values to an array in order to construct a dynamic query?

When building the query object for MongoDB, I encountered an issue with the output. Here is what I got: output {"$match":{"$and":[{id:1},{name:"Alfred"},{location:"moon"},{"values":{"$in":[{name: ...

javascriptmongodbobject

Tips for building dynamic web interfaces that allow for interactive communication in both directions

I'm struggling to find the right keywords to search for, so I'll explain what I'm attempting to accomplish using a basic example and see if anyone can suggest some potential techniques or technologies. Imagine a scenario where one or more i ...

javascriptjqueryajaxjquery-uiwebsocket

Tips on transferring a Rails variable to Ajax

Struggling to integrate a progress bar (Javascript) into my Ruby on Rails application, I am facing difficulties in passing values from the controller to JS for updating the bar. In my initial attempt, I used a basic global variable ($count), but it remain ...

javascriptjqueryruby-on-railsrubyajax

The sequence in which objects are added in ThreeJS can impact the alpha display

While working on my program, I encountered an issue with creating a dynamic number of point cloud objects with custom attributes that include the alpha value of each particle. Everything seems to be functioning properly except for when these objects are ...

javascriptthree.js

How to effectively manipulate nested arrays in JavaScript without altering their references

Welcome everyone, I've been working on a project using next.js and I've encountered an issue with filtering posts. The filter function works perfectly when the posts are in a simple array like ObjChild. However, I have another section on my site ...

javascriptarraysreactjsnext.js

What is the process of dynamically loading CSS into an HTML document?

In my C# program, I am utilizing a web browser control and setting its HTML property programmatically by loading it from an HTML string variable. While this setup works almost perfectly, I have noticed that it loses the reference to the CSS file. I believe ...

c#javascriptcss

Error encountered when trying to reproduce the Angular module that is currently unavailable

Here is the current structure of my Angular 1.x controller: const app = angular.module("userRegistration", [ "some-dep", "templates", "ngRoute", "ngResource", "ngCookies", "userRegistration.controllers", "userRegistration.services", "userR ...

angularjsangular1.6

"Implementing the Three.js OBJloader feature with the enhanced functionality of

I'm looking to create a simple 3D model viewer with rotation capabilities, but I've run into an issue. When I add OrbitControls to my code, the page just shows up as blank: controls = new THREE.OrbitControls( camera ); controls.addEventListener( ...

javascriptthree.js

"Utilize an HTML file open dialog box to gain access to the server's

Is it feasible to implement a file open dialog box that displays files and directories from the server's file system? In my web application, there is a need for users to select a file that resides on the server. Are there any plugins available for th ...

javajavascripthtmlfile-upload

What is the process for updating the renderValue in a Mui React Select component to display a different array?

Is there a way to customize the renderValue function of a Material-UI Select component to display an array of the printname key values from the corresponding dictionary? I am storing the lang.code values in the paramvalues array as I need them for URL par ...

javascriptreactjsarraysmaterial-ui

Utilize the Angular 1 function again

Imagine you have two sets of items: available items and associated items. I need to create a search function that utilizes different API methods to search each list separately. After obtaining the search results, I must store them in models using the $scop ...

javac#asp.netangularjsangularjs-scope

"Troubleshooting IE-specific problem: Loading dropdown options dynamically with AJAX on change

Struggling with a particular issue lately. I'm attempting to populate a second dropdown menu based on the selection made in the first one using jquery ajax. Surprisingly, it works flawlessly on all browsers except for IE 11. Below is the ajax functio ...

javascriptphpjqueryhtmlajax

Is there a way to customize the canvas rating animation?

I am looking to implement a rating system, and currently have the following code: Here is my existing code snippet: jQuery.fn.multirating = function() { // Code here } $(function(){ $('.multirating-wrapper').multirating(); }) However, ...

javascriptajaxhtml5-canvas

Implementing CORS in ReactJs: A Step-by-Step Guide

When working with React.js, I often use this fetchData config: fetchData = () => { fetch("http://localhost:8000/batch_predict", { method: "POST", headers: { 'Accept': 'application/json, text/plain, */*&apo ...

javascriptpythondjangoreactjs

Angular 5 - Creating a dynamic function that generates a different dynamic function

One of my latest projects involved creating a versatile function that generates switch-case statements dynamically. export function generateReducer(initialState, reducerName: ReducerName, adapter: EntityAdapter<any>): (state, initialState) => ISt ...

javascriptangulartypescriptngrxangular2-aot

Anticipate the assessment of the scope with Protractor

Here is a sample protractor test that involves waiting for a model to be defined: <body> <div ng-app="test2App" ng-controller="test2Ctrl"> <input ng-model="myValue"> </div> </body> var test2App = angular.mod ...

angularjsprotractor

Remain on the current webpage following the submission of comparable ajax-forms

Seeking assistance with an issue involving Ajax that I believe is unique. Desired Outcome I have a newsfeed with various posts and interspersed forms, such as polls, for user interaction and submission of results. Objectives Users should be able to inter ...

javascriptphpjqueryajax

When utilizing jQuery.Mockjax to simulate the JSON data, the Backbone.Collection.fetch() function consistently results in a 404 error

My setup is pretty straightforward: Main.js: (function($) { "use strict"; var Company = Backbone.Model.extend({ defaults: { title: "", description: "" }, initialize: function() { ...

javascriptjqueryjsonbackbone.js