CODEWITHSUNDEEP
androidgoogle-mapsnativescript
user1261710
user1261710

Reputation: 2639

NativeScript Google Maps Api - Google Maps is blank

I am writing an app with NativeScript v6 and Angular 8.

tns --version 6.1.2

I am using this plugin to try to display Google Maps.

The map appears and no errors are thrown but the map is blank.

Here is my code snippet:

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)"
            iosOverflowSafeArea="true">
        </MapView>
    </GridLayout>
</Page>

component

[![import { Component, OnInit } from '@angular/core';
//import { registerElement } from 'nativescript-angular/element-registry';
import { MapView, Marker, Position } from "nativescript-google-maps-sdk";

import { ElementRef, ViewChild } from "@angular/core";
import { registerElement } from "nativescript-angular/element-registry";

// Important - must register MapView plugin in order to use in Angular templates
registerElement('MapView', () => MapView);

@Component({
    selector: "ns-clocking",
    templateUrl: "./clocking.component.html",
    styleUrls: \["./clocking.component.css"\],
    moduleId: module.id
})
export class ClockingComponent implements OnInit {

    mapView: MapView;

    constructor() {}

    public ngOnInit() {}

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

        const mapView = event.object;

        this.mapView = mapView;

        const NA_CENTER_LATITUDE = 39.8283459;
        const NA_CENTER_LONGITUDE = -98.5816737;

        this.mapView.latitude = NA_CENTER_LATITUDE;
        this.mapView.longitude = NA_CENTER_LONGITUDE;
        this.mapView.zoom = 3;

        const stLouisCoordinates = {
            latitude: 38.619081,
            longitude: -90.196846
        };

        const stLouisMarker = new Marker();
        stLouisMarker.position = Position.positionFromLatLng(
            stLouisCoordinates.latitude,
            stLouisCoordinates.longitude
        );
        stLouisMarker.title = "St. Louis, MO";
        stLouisMarker.snippet = "Go Cardinals!";
        stLouisMarker.color = "#6B8E23";
        this.mapView.addMarker(stLouisMarker);

    }
}

AndroidManifest

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="@string/nativescript_google_maps_api_key" />

I used the same Key in a different setting and it worked: https://jsfiddle.net/aubz88/6frk9evm/3/

enter image description here

Upvotes: 0

Views: 835

Answers (1)

Priyansh Mishra
Priyansh Mishra

Reputation: 37

Yes , I have faced the same issue . Kindly check your google developer console where the Google Maps API is enabled or not for both iOS/Android.

Also for reference check this out https://market.nativescript.org/plugins/nativescript-google-maps-sdk

this works for me , use code according to your requirement Angular 8 or Plain JS/TS

Upvotes: 1

Related Questions