Native Google Maps Black Screen



I am using Native Google Maps but i am getting black screen instead of map. Below is my code:

import { Component } from '@angular/core';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, CameraPosition, GoogleMapsMarker, GoogleMapsMarkerOptions } from 'ionic-native';
import { NavController, Platform } from 'ionic-angular';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  constructor(platform: Platform) {
      platform.ready().then(() => {

    loadMap() {
        // make sure to create following structure in your view.html file
        // <ion-content>
        //  <div #map id="map"></div>
        // </ion-content>

        // create a new map by passing HTMLElement
        let element: HTMLElement = document.getElementById('map');

        let map = new GoogleMap(element);

        // listen to MAP_READY event => console.log('Map is ready!'));

        // create LatLng object
        let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

        // create CameraPosition
        let position: CameraPosition = {
            target: ionic,
            zoom: 18,
            tilt: 30

        // move the map's camera to position

        // create new marker
        let markerOptions: GoogleMapsMarkerOptions = {
            position: ionic,
            title: 'Ionic'

            .then((marker: GoogleMapsMarker) => {


Same problem.

O copy doc of google map native and it dont run. Stay always with grey screen.

I check network conections on chrome, and see app dont send any requests.

I think its this probleman.


Solved this issue by myself.


How did you solve it ? I am getting the map but my screen is white-borwn


Below is my code, you can use it:

Add this in ion-content: <div #map id="map"></div>

And this will be in ts file:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Platform } from 'ionic-angular';
import 'rxjs/add/operator/map';

declare var google;

 Generated class for the Contact page.

 See for more info on
 Ionic pages and navigation.
  selector: 'page-contact',
  templateUrl: 'contact.html'
export class ContactPage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(platform: Platform) {

    platform.ready().then(() => {



    let latLng = new google.maps.LatLng('67.875323', '91.123890');

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      position: latLng
    } = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    let marker = new google.maps.Marker({
      animation: google.maps.Animation.DROP,
      position: latLng

    let content = "<h4>Heading</h4>";

    this.addInfoWindow(marker, content);


  addInfoWindow(marker, content){

    let infoWindow = new google.maps.InfoWindow({
      content: content

    google.maps.event.addListener(marker, 'click', () => {, marker);



Ionic Native Google Maps not working on Device, Emulator or Browser

Check CSP config in index.html, adding:

<meta http-equiv=“Content-Security-Policy” content=“default-src ‘self’ gap://ready file://* *; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’”/>

may help…

ps. I spent 2 hours to find this solution and make maps works again :wink:



<script src=""></script>

before <script src="cordova.js"></script>

<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

this one didn’t help me



One question about your previous code you put in the same place of this code?



Didn’t understand your question.