plugins

plugins copied to clipboard

Hi!

I am trying to reverse engineer the codebase but cannot even find how to put POI's on the map. Don't even see methods on the MapView object. It is clear that the GoogleMap object has such methods, but not really sure how to access it with Angular.

package.json { "name": "borka-poc-nativescript-fe", "main": "./src/main.ts", "version": "1.0.0", "private": true, "dependencies": { "@angular/animations": "~13.2.0", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", "@nativescript/angular": "^13.0.0", "@nativescript/core": "~8.2.0", "@nativescript/google-maps": "^1.1.2", "@nativescript/theme": "~3.0.2", "rxjs": "~7.5.0", "zone.js": "~0.11.5" }, "devDependencies": { "@angular-devkit/build-angular": "~13.2.0", "@angular/compiler-cli": "~13.2.0", "@nativescript/android": "^8.2.2", "@nativescript/ios": "8.2.3", "@nativescript/types": "~8.2.0", "@nativescript/webpack": "~5.0.6", "@ngtools/webpack": "~13.2.0", "typescript": "~4.5.5" } }

Thank you in advance!

That way you can access the native methods as in the old plugin

Getting {} on iOS and on Android as well The map is working fine (firing events, draggable etc.)

app.component.ts

import { Component } from '@angular/core'
import { GoogleMap } from '@nativescript/google-maps'
@Component({
  selector: 'ns-app',
  templateUrl: './app.component.html',
})
export class AppComponent {

  private map: GoogleMap;

  onMapReady(event) {
    this.map = event.map;
    console.log(this.map);
    console.log('ready');
  }
}

Android log:

Successfully synced application org.nativescript.borkapocnativescriptfe on device emulator-5554.
JS: {}
JS: ready

iOS log:

CONSOLE LOG: {}
CONSOLE LOG: ready

app.component.html

<GridLayout margin="10 30">
  <!--page-router-outlet></page-router-outlet-->
  <MapView (ready)="onMapReady($event)" ()></MapView>
</GridLayout>

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptModule } from '@nativescript/angular'

import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { ItemsComponent } from './item/items.component'
import { ItemDetailComponent } from './item/item-detail.component'
import { GoogleMapsModule } from '@nativescript/google-maps/angular';

@NgModule({
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, AppRoutingModule, GoogleMapsModule],
  declarations: [AppComponent, ItemsComponent, ItemDetailComponent],
  providers: [],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

package.json (again, just to have all info in one comment)

{
  "name": "borka-poc-nativescript-fe",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@nativescript/angular": "^13.0.0",
    "@nativescript/core": "~8.2.0",
    "@nativescript/google-maps": "^1.1.2",
    "@nativescript/theme": "~3.0.2",
    "rxjs": "~7.5.0",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@nativescript/android": "^8.2.2",
    "@nativescript/ios": "8.2.3",
    "@nativescript/types": "~8.2.0",
    "@nativescript/webpack": "~5.0.6",
    "@ngtools/webpack": "~13.2.0",
    "typescript": "~4.5.5"
  }
}

if you need any more info, please let me know

{} is likely the native instance - you can try console.dir to enumerate it's properties, but native objects print as {}.

thanks it is working now. any idea how to use markerclusterer? I tried to use @googlemaps/markerclusterer package, but does not seem to work. How can we use such external libraries with your plugin?

How is it working for you? Did you change anything? I get {} everytime, console.dir shows:

  JS: ==== object dump start ====
  JS: ==== object dump end ====

Everything else works just fine.

@adamturcsan if you want to get the native value you can try logging theObject.native

Thanks! It really is the native object (com.google.android.gms.maps.GoogleMap@2a4eb8), I mean the event.map.native. But I'd like to use the ts/js API. So the console.dir(event.map.native) shows me a bunch of methods but I assume it is not the same as if I used the API from event.map directly. Or am I missing something?

I tried to figure out how this works in the background. I saw a guard with instanceof com.google.android.gms.maps.GoogleMap.

I tried to check myself whether it returns true:

        console.log(event.map.native instanceof com.google.android.gms.maps.GoogleMap);

But the ts compiler says Property 'gms' does not exist on type 'typeof android'. Could this be a problem?

Yes that's the issue, I'm curious why it's failing for you

Any tips? What should provide this namespace? Is there a package or anything else I could check if properly downloaded and installed?

Okay, I solved it. I had the object, only the type informations are changed in runtime (of course... i know), and GoogleMap object has no standard properties, only getters, so the object is practically empty. So no error there.

The 'gms' isssue is a 'non-issue' as it is not needed in the user space. So that's all.