Angular-google-maps: Can't get GoogleMap object

[ronenmiller]

Issue description
Hi,
I am trying to create an OverlayView in order to add customized markers, such as done in this example.
To do that I need to get the actual map instance. In the docs I see this should be possible with GoogleMapsAPIWrapper.getNativeMap().
However, when I try this, the Promise never returns.

Steps to reproduce and a minimal demo of the problem
See example here. Where the code:
this.mapsAPIWrapper.getNativeMap().then((map) => {
console.log('Got map!')
console.log(map);
});
Never returns from getNativeMap() call.

_Use https://plnkr.co or similar -- try this template as a starting point: http://plnkr.co/edit/YX7W20?p=preview

_What steps should we try in your demo to see the problem?_

Current behavior
Not returning from function call - Promise not resolved.

Expected/desired behavior
Promise resolved - returning map instance.

angular2 & angular-google-maps version
agm/core": "^1.0.0-beta.2"
Angular 5.

Other information

[CJNE]

Don't know if this is by design or not, i ran in to the same issue.
The reason for this is that the map directive has it's own instance of GoogleMapsAPIWrapper.
So when you provide your own instance of GoogleMapsAPIWrapper none of the methods that relies on the private _map instance variable will resolve until a map has been created for that instance.

If the intention is to provide the GoogleMapsAPIWrapper service from the module and use that same instance in the map directive then the fix is:

Add
{ provide: GoogleMapsAPIWrapper, useClass: GoogleMapsAPIWrapper }
in core.module.ts providers section

Remove GoogleMapsAPIWrapper from the providers section in directives/map.ts

And make sure not to provide GoogleMapsAPIWrapper in your app module, it will already be provided by the agm module.

Alternatively you can add
@ViewChild(AgmMap) mapElement: any
to your component and access the api wrapper using this.mapElement._mapsWrapper

[rmiller-sgntr]

Your last suggestion sounds more like what I need since I am using multiple maps. But, I am not sure you can do this, since the underscore hints that _mapsWrapper is declared private, and therefore will not pass compilation.

[CJNE]

You can but be aware that things might break with updates as this is probably not the intended use.
It could be that GoogleMapsAPIWrapper is only meant to be used internally by the module?

[agborkowski]

(mapReady)="onMapReady($event)" 

in component ulll get map instance

```
public onMapReady(e) {
console.log('map instance', e);
}
````

[JimmyTheNerd]

Based on @agborkowski example:

HTML:

<agm-map (mapReady)="mapReady($event)"></agm-map>

TS:

mapReady(map) {
    var marker = new google.maps.Marker({
        position: {lat:40.706130, lng: -74.076870},
        map: map,
        title: 'Hello World!'
    });
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[BataLaSalade]

Hi,
I try to access to the mapElement using @ViewChild(AgmMap) mapElement: any and your mapReady event binding but the mapElement is always undefined.
Can someone help me ?

[a-faraz]

@BataLaSalade , I wasn't able to access the mapElement that way either. This method worked for me though.

TS

private _map: any;



onMapReady(evt) {
  this._map = evt;
}

HTML

<agm-map (mapReady)="onMapReady($event)">
</agm-map>