dapriett / nativescript-google-maps-sdk

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

Google Map Event not working on iOS Angular #437

Open zabi90 opened 3 years ago

zabi90 commented 3 years ago

I added this plugin every thing working fine on android but on iOS no event is firing expect mapReady . Can some one help me to find this issue thanks. Regards

map.component.tns.html

<GridLayout>
    <MapView [latitude]="latitude" [longitude]="longitude" [zoom]="zoom" [minZoom]="minZoom" [maxZoom]="maxZoom" [bearing]="bearing" [tilt]="tilt" i-padding="50,50,50,50" [padding]="padding" (mapReady)="onMapReady($event)" (markerSelect)="onMarkerEvent($event)"
        (markerBeginDragging)="onMarkerEvent($event)" (markerEndDragging)="onMarkerEvent($event)" (markerDrag)="onMarkerEvent($event)" (markerInfoWindowTapped)="onMarkerEvent($event)" (coordinateTapped)="onCoordinateTapped($event)" (cameraChanged)="onCameraChanged($event)"
        (cameraMove)="onCameraMove($event)"></MapView>
</GridLayout>

map.component.tns.ts

import { Component, OnInit, ElementRef,  ViewChild} from '@angular/core';

import { registerElement } from '@nativescript/angular';

// Important - must register MapView plugin in order to use in Angular templates
// registerElement("MapView", () => require("nativescript-google-maps-sdk").MapView);
import { MapView, Marker, Position } from 'nativescript-google-maps-sdk';

registerElement('MapView', () => MapView);

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  @ViewChild("MapView") mapView: ElementRef;
  constructor() { }

    latitude =  32.49268;
    longitude = 74.53134;
    zoom = 8;
    minZoom = 0;
    maxZoom = 22;
    bearing = 0;
    tilt = 0;
    padding = [40, 40, 40, 40];

    lastCamera: String;

  ngOnInit(): void {
  }
   //Map events
   onMapReady = (event) =>{

    console.log("Map Ready");
    let mapView = event.object;
    var marker = new Marker();
        marker.position = Position.positionFromLatLng(this.latitude, this.longitude);
        marker.title = "Sialkot";
        marker.snippet = "Pakistan";
        marker.userData = {index: 1};
        mapView.addMarker(marker);

        mapView.settings.indoorLevelPickerEnabled = false;
        mapView.settings.compassEnabled = true;
        mapView.settings.myLocationButtonEnabled = true;

  };

 onCoordinateTapped = (args) => {
    console.log("Coordinate Tapped, Lat: " + args.position.latitude + ", Lon: " + args.position.longitude, args);
};

 onMarkerEvent(args) {
    console.log("Marker Event: '" + args.eventName
        + "' triggered on: " + args.marker.title
        + ", Lat: " + args.marker.position.latitude + ", Lon: " + args.marker.position.longitude, args);
}

 onCameraChanged(args) {
    console.log("Camera changed: " + JSON.stringify(args.camera), JSON.stringify(args.camera) === this.lastCamera);
    this.lastCamera = JSON.stringify(args.camera);
}

 onCameraMove(args) {
    console.log("Camera moving: " + JSON.stringify(args.camera));
}

}