Native Google Maps Black Screen

Ionic Framework ionic-v3
1

Hello,

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';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(platform: Platform) {
      platform.ready().then(() => {
          this.loadMap();
      });
  }

    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
        map.one(GoogleMapsEvent.MAP_READY).then(() => 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
        map.moveCamera(position);

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

        map.addMarker(markerOptions)
            .then((marker: GoogleMapsMarker) => {
                marker.showInfoWindow();
            });
    }
}
1 Like
2

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.

3

Solved this issue by myself.

4

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

5

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 http://ionicframework.com/docs/v2/components/#navigation for more info on
 Ionic pages and navigation.
 */
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

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

  constructor(platform: Platform) {

    platform.ready().then(() => {
      this.loadMap();
    });

  }

  loadMap(){

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

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      position: latLng
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    let marker = new google.maps.Marker({
      map: this.map,
      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', () => {
      infoWindow.open(this.map, marker);
    });

  }

}
1 Like
6

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:

7

Add

<script src="http://maps.google.com/maps/api/js"></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

1 Like
8

@aditya_1027

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

9

@BernardoGomes

Didnā€™t understand your question.