Goggle map is covering entire screen

[pjpandey]

the first stack layout is not visible once google map is ready
html file

component file

import { Component, OnInit, NgZone } from ‘@angular/core’;
import { registerElement } from ‘nativescript-angular/element-registry’;
import { MapView, Marker, Position } from ‘nativescript-google-maps-sdk’;
import * as Geolocation from “nativescript-geolocation”;

registerElement(‘MapView’, () => MapView);

@Component({
selector: ‘pt-google-map’,
templateUrl: ‘./pt-backlog/pt-google-map/pt-google-map.component.html’,
styleUrls : [’./pt-backlog/pt-google-map/pt-google-map.component.css’]
})

export class PtGoogleMapComponent implements OnInit {

latitude =  -33.86;
longitude = 151.20;
zoom = 8;
bearing = 0;
tilt = 0;
padding = [40, 40, 40, 40];
private watchId: number;    
mapView: MapView;

lastCamera: String;

constructor(private zone: NgZone) { }

ngOnInit() { }

onMapReady(event) {
    console.log('Map Ready');

    this.mapView = event.object;

    console.log("Setting a marker...");

    var marker = new Marker();
    marker.position = Position.positionFromLatLng(-33.86, 151.20);
    marker.title = "Sydney";
    marker.snippet = "Australia";
    marker.userData = {index: 1};
    this.mapView.addMarker(marker);
}

onCoordinateTapped(args) {
    this.mapView = args.object;
    console.log("Coordinate Tapped, Lat: " + args.position.latitude + ", Lon: " + args.position.longitude);
    //console.dir(args);
    var marker = new Marker();
    marker.position = Position.positionFromLatLng(args.position.latitude, args.position.longitude);
    marker.title = "Sydney";
    marker.snippet = "Australia";
    marker.userData = {index: 1};
    this.mapView.addMarker(marker);
}

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);
}

private getDeviceLocation(): Promise<any> {
    return new Promise((resolve, reject) => {
        Geolocation.enableLocationRequest().then(() => {
            Geolocation.getCurrentLocation({
                desiredAccuracy: 3,
                updateDistance: 5, 
                timeout: 2000 
            }).then(location => {
                resolve(location);
            }).catch(error => {
                reject(' get deive location');
            });
        });
    });
}

public updateLocation() {
    this.getDeviceLocation().then((result) => {
        this.latitude = result.latitude;
        this.longitude = result.longitude;
    }, (error) => {
        console.error('error updateLocation');
    });
}

public startWatchingLocation() {
    this.watchId = Geolocation.watchLocation((location) => {
        if(location) {
            this.zone.run(() => {
                this.latitude = location.latitude;
                this.longitude = location.longitude;
            });
        }
    }, (error) => {
        console.dir(' startWatchingLocation');
    }, {desiredAccuracy: 3, updateDistance: 10});
}

public stopWatchingLocation() {
    if(this.watchId) {
        Geolocation.clearWatch(this.watchId);
        this.watchId = null;
    }
}

}

css file

#mapView {
width: 100%;
height: 50%;
margin: 0;
padding: 0;
}

#mapView {
position: relative;
}

[Eddy]

If you change the outer GridLayout to StackLayout it will.

Or change the GridLayout to <GridLayout rows="auto, *"> and add row="1" to the <MapView> tag.

[pjpandey]

Thanks first solution worked