NativeScript - how to get google maps my location button to show

[aquinn637]

I am building an app with NativeScript 6+ and Angular 8+.

I am using this google maps plugin: https://github.com/dapriett/nativescript-google-maps-sdk

It's working fine but I want to display the 'my location' button. I have it enabled but it's not turning up.

template

<Page class="page">
    <GridLayout rows="auto,*">
        <Label row="0" class="h3" text="Maps"></Label>
        <MapView
            row="1"
            #mapView
            i-padding="50,50,50,50"
            (mapReady)="onMapReady($event)"
            myLocationButtonEnabled="true"
            myLocationTapped="myLocationTapped()"
            iosOverflowSafeArea="true">
        </MapView>
    </GridLayout>
</Page>

component

export class ClockingComponent implements OnInit {
    mapView: MapView;

    constructor() {}

    public ngOnInit() {}

    public onMapReady(event) {
        console.log(" map ready ");

        const mapView = event.object;

        this.mapView = mapView;

    }

    public myLocationTapped() {}

[dimitriospafos]

@aquinn637 try this:

if(isAndroid) {
            var uiSettings = this.mapView.gMap.getUiSettings();
            uiSettings.setMyLocationButtonEnabled(true);
            this.mapView.gMap.setMyLocationEnabled(true);
        }

        if(isIOS) {
            this.mapView.gMap.settings.myLocationButton = true;
            this.mapView.gMap.myLocationEnabled = true;
        }

[felixkrautschuk]

@aquinn637 I had the same issue and it seems that this is related to necessary permissions for accessing the location.

On iOS, you can simply follow @dimitriospafos 's suggestion. this.mapView.gMap.settings.myLocationButton = true; will show the myLocation-Button, this.mapView.gMap.myLocationEnabled = true; will automatically show an alert for requesting permission of device location (if not already accepted before).

On Android, you need to request this permission BEFORE. Otherwise, the myLocation-Button will still not be visible or the application may even crash saying

java.lang.SecurityException: my location requires permission ACCESS_FINE_LOCATION or ACCESS_COARSE_LOCATION

(even if those permissons are set in the AndroidManifest).

What I do is requesting the permission for Android and iOS using the nativescript-geolocation plugin within onMapReady-event and then I enable the myLocation-Button.

export function onMapReady(args: EventData) {
    let mapView = args.object;    

    //...

    enableLocation().then(() => {
        mapView.myLocationEnabled = true;
        mapView.settings.myLocationButtonEnabled = true;
    });
}

function enableLocation() {
    return new Promise(((resolve, reject) => {
        geolocation.isEnabled().then((isEnabled) => {
            if(isEnabled) {
                resolve();
            } else {
                geolocation.enableLocationRequest(false, true).then(() => {
                    resolve();
                }, (e) => {
                    alert("Error: " + (e.message || e));
                    reject();
                });
            }
        }, (e) => {
            console.log("error in geolocation.isEnabled:");
            console.log(e.message);
            reject();
        });
    }));
}