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

[Essen]

following the ionic doc for the google maps

I got this error:

Regards

[deltadax18]

Hi! i got the same problemas

Here you can find the working example of ionic google maps

jose-cabrera/Ionic2-google-maps-native

[Essen]

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

[Essen]

I recieve white page,

[deltadax18]

Do you have a valid API Key?

[Essen]

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

[DanielTS]

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?

[Essen]

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.
Regards

[DanielTS]

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
        map.moveCamera(position);

        // create new marker
        let markerOptions: MarkerOptions = {
            position: ionic,
            title: 'Ionic'
        };
        map.addMarker(markerOptions)
            .then((marker: Marker) => {
            marker.showInfoWindow();
            });
        });

    });
}

I hope it helped you.
Regards

[Essen]

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:

[DanielTS]

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:

GoogleMaps

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

*see my app.module.ts page:

[Essen]

@DanielTS
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>
    </ion-content>

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

[DanielTS]

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 !

[Essen]

@DanielTS

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

Best regards

[DanielTS]

@Essen,

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:

Chrome://inspect/#devices

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

Regards

[Essen]

@DanielTS
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

[Essen]

@DanielTS

I am testing in both in browser and android phone.

Best Regards

[DanielTS]

@Essen,

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

regards

[DanielTS]

@Essen,

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

<ion-content>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

[Essen]

@DanielTS