Typescript Error Tupe 'Promise<void>' is not assignable to type 'Marker'. Property '_objectInstance' is missing in type 'Promise'<void>

following the ionic doc for the google maps

I got this error:


Hi! i got the same problemas

Here you can find the working example of ionic google maps

Can you pplease tell me files that you modify because i want to intergrate it in other ionic pages.
Thank you in advance

I recieve white page,

Do you have a valid API Key?

Thank you for answering my post, Yeah for sure I have it

I have the same issue. In the line:

const marker: Marker = map.addMarker(markerOptions)

After remove the const marker: Marker = , the app compiles, but the marker not show.
Anyone have any ideas about this error?

1 Like

Hi @DanielTS I am always looking for the solution. I didn’t find it. Once I have an idea I will post it and tag you.

1 Like

Hi @Essen ,

I found a possible solution:

loadMap() {

    let element: HTMLElement = document.getElementById('map');
    let map: GoogleMap = this.googleMaps.create(element);
    map.one(GoogleMapsEvent.MAP_READY).then(() => {
       var latitude, longitude;
        map.getMyLocation().then((userLocation) => {
            console.log(userLocation.latLng.lat + ' / ' + userLocation.latLng.lng);
            latitude = userLocation.latLng.lat;
            longitude = userLocation.latLng.lng;
        // create LatLng object
        let ionic: LatLng = new LatLng(userLocation.latLng.lat, userLocation.latLng.lng);
        // 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'
            .then((marker: Marker) => {

I hope it helped you.

1 Like

Hi @DanielTS,
Thanks a lot for your help,

I used it and i got again this error:
Can you please post for me the hole page. if it is possible:

Thanks a lot again

Here is the error i got:

Hi @Essen,

This error is because the Provider was not set.

In src/app/app.modules.ts insert in the begginer:

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

And providers, insert:


I hope I have helped.
If you have any further mistakes, please let me know.

*see my app.module.ts page:

Thank you
the error is disappeared. but i didn’t receive the map,
in my .html file i have

    <ion-content padding>
	   <div id="map"></div>

and here is the typeScript file:
I just copy and paste the method you sent me.

Great @Essen

Now, in your style of this page, insert:

#map {
height: 100%;

#map_canvas {
    width: 100%;
    height: 100%;
    transition: opacity 150ms ease-in
#map_canvas.show-map {
    opacity: 1;
ion-app._gmaps_cdv_ .nav-decor{
    background-color: transparent !important;

Try now !

1 Like


I got justthe div color changed. no map appears.
I don’t have map_canvas id I have just the map id

Best regards


Sorry, I use map_canvas because of a bug in IOS. 1 question … You’re looking at Device, correct? (Because Google maps Native does not appear in the browser)

If you’re looking for Device, open Chrome and go to:


Inspect your Device, go to Console and see if any errors appear.
If you have any error, let me know.


where should I add the map_canvas, the important thing form me is to display the map.
I am newbie to ionic framewok.
Can you edit my file .html so that it can be the same as yours
Thank you


I am testing in both in browser and android phone.

Best Regards


You do not need to change your html, ok?
Is there an error in the browser console?



But if you want to see, it’s like this:

  <div #map id="map" style="height:100%;"></div>
1 Like