Ionic native google map not working


i am using the code that is in the documentation, this one :

import {
} from ‘@ionic-native/google-maps’;

export class MapPage {
constructor(private googleMaps: GoogleMaps) {}

// Load map only after view is initialized
ngAfterViewInit() {

loadMap() {
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won’t be visible
// <div #map id=“map” style=“height:100%;”>

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

let map: GoogleMap = this.googleMaps.create(element);

// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
() => {
console.log(‘Map is ready!’);
// Now you can add elements to the map like the marker

// create LatLng object
let ionic: LatLng = new LatLng(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: MarkerOptions = {
position: ionic,
title: ‘Ionic’

const marker: Marker = map.addMarker(markerOptions)
.then((marker: Marker) => {

It shows me a blank page . i inspect the element and the <div #map id=“map”> has nothing on it. Please help


I have the same problem. I suppose the error is in : => {
console.log(‘Map is ready!’);
// Now you can add elements to the map like the marker
because the log doesn’t appear in the console.


In my app appears the log Map is ready, i do not know what can be that shows blank page


Did you test your application with your phone or just with your web browser ? (Maybe the computer can’t display the map…)


I know that this component only works on the device o emulator, i try it but no solution