Ionic native google map not working


#1

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

import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
CameraPosition,
MarkerOptions,
Marker
} from ‘@ionic-native/google-maps’;

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

// Load map only after view is initialized
ngAfterViewInit() {
this.loadMap();
}

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

// create new marker
let markerOptions: MarkerOptions = {
position: ionic,
title: ‘Ionic’
};

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

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


#2

I have the same problem. I suppose the error is in :
map.one(GoogleMapsEvent.MAP_READY).then(() => {
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.


#3

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


#4

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


#5

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