NativeScript / plugins

@nativescript plugins to help with your developments.
https://docs.nativescript.org/plugins/index.html
Apache License 2.0
190 stars 107 forks source link

[@nativescript/google-maps] overlay events not firing #462

Open jlafitte opened 1 year ago

jlafitte commented 1 year ago

I've been struggling trying to work this out for a week. I've looked all the source and everything seems fine, but for some reason I cannot get them to fire on iOS or Android. I've tried Circle, Polygon, Polyline. None of them fire the event. I've checked to make sure my function names and MapView properties all line up. I even modified source and verified the iOS listener and Android listener are executing at this point, it's like the MapView just isn't receiving the notification.

Any help is appreciated.

triniwiz commented 1 year ago

@jlafitte possible to share what you tried already ?

jlafitte commented 1 year ago

It's a little complicated because I'm building the polylines from geoJson. The polylines render fine. And I don't get the mapTap event when I click on them. But I also don't get the polyline event.

I'm using NS 8.4.0 and google-maps 1.4.10

But this is basically what I have now:

map-page.xml

<map:mapView
    id="mapView"
    left="0"
    top="0"
    width="100%"
    height="100%"
    lat="38.24761295957137"
    lng="-97.163617187499985"
    zoom="4"
    ready="onMapReady"
    mapTap="onMapTap"
    polyline="onPolylineTap"
    mapLongPress="onMapLongPress"
    markerSelect="onMarkerSelect"
    iosOverflowSafeArea="true" />

map-page.js

export function onMapReady(event) {
  let gMap = event.map;
  gMap.addPolyline(polylineOptions);  //This is the complicated part, showing this for brevity
}

export function onMapTap() {
  console.log("map tap");
}

export function onPolylineTap() {
  console.log("polyline tap");
}

I've tried setting my mapTap event to the onPolylineTap and it does fire (obviously without the polyline data). In the google-maps source, I just added a console.log to verify that area of code is being executed. I don't know where to go beyond that because it all looks correct to me. The taps will do a lot more, but for debugging right now, this is what I have.

jlafitte commented 1 year ago

Just to do a sanity check, I created a new project with the minimal code so I could test the events. I get the same results. I don't feel like this is a problem with my code, but I could be wrong. Please let me know if you see anything wrong. The only thing I didn't include in the project was my google maps API keys. I get the same results on both iOS and Android.

https://github.com/jlafitte/GMapTest

And a screen capture of it: https://www.youtube.com/shorts/65YXf23JXsc

jlafitte commented 1 year ago

So, I worked around this by attaching directly to the MapView:

export function onMapReady(event) {
  let mapView = event.object;
  let gMap = event.map;

  gMap.addPolyline(polylineOptions);  //This is the complicated part, showing this for 

  mapView.on("polyline", () => console.log("polyline tap"));
}

So I guess the event notification was going through, but it wasn't calling my defined function. Maybe this is a NS bug of some sort? I'm not sure, this work around seems like it's going to work for me at least. Would really like to get to the bottom of this, however.