Angular-google-maps: getNativeMap() and getBounds() Promise never gets resolved neither rejected

[giorgiofellipe]

I'm trying to get native map instance to do fitBounds but it's Promise never gets resolved neither rejected.
I've already tried to do this in a component inside sebm-google-map but it also didn't work.

    <sebm-google-map>
      <map-content></map-content>
    </sebm-google-map>

Plunker: http://plnkr.co/edit/VKqwVSUlzFJjHPX7cQm4?p=preview

v0.17.0

@angular/cli: 1.0.0-beta.32.3
node: 6.9.5
os: darwin x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/platform-server: error
@angular/router: 3.4.8
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.8

[SebastianM]

Please provide a plunkr

[giorgiofellipe]

http://plnkr.co/edit/VKqwVSUlzFJjHPX7cQm4?p=preview

[hesyar]

I have exactly the same issue

[kleek430]

I am also seeing the same thing with code similar to that provided in the code sample link on this thread . Is this functionality broken or is there a config file setting that we are all missing here ?

[giorgiofellipe]

@SebastianM any news?

[zartdinov]

@giorgiofellipe It works!

I did like in comment (#715) (there are outdated, not working code example).
Sorry, I don't have time to full plunkr example, may be later.
Try to use child directive.

@Directive({
  selector: 'my-custom-extension'
})
export class MyCustomExtension implements AfterViewInit{
  constructor(private _wrapper: GoogleMapsAPIWrapper) {
    console.log('constructor')
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
    this._wrapper.getNativeMap().then((m) => {
      console.log('native map',m);
    }, err=>{
      console.log('error',err);
    })
  }
}

[giorgiofellipe]

@zartdinov thanks, it worked!

But I didn't understand why it should be done this way, I should be able to access GoogleMapsAPIWrapper from outside, shouldn't I?

[SebastianM]

@giorgiofellipe sorry for the delay. This is due to the fact that angular has a hierarchical dependency injection system and a new instance related to every map instance gets create for the map element and is therefor no accessible outside the map component.

I'm closing this as it works as expected

[ghost]

Explains my issue as well. Calling this.wrapper.getNativeMap() never resolved because the wrapper was injected on a service; it needs to be injected on components that are children of the map.

@Injectable()
export class MapService {
  constructor(private wrapper: GoogleMapsAPIWrapper ...   < wrapper with no underlying map! 

[aikeda]

Hi all! You do not need a child directive to obtain your native map instance. You can get it subscribing for mapReady events on AgmMap object.

@ViewChild(AgmMap) agmMap;

ngAfterViewInit(){
    this.agmMap.mapReady.subscribe(map => {
        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
    });
}

[kapocius]

aikeda, maybe you can post the whole code ?

[franknwankwo]

@SebastianM why does getBounds() still return undefined?? Everything else seems to work, but getBounds is always undefined.

[aamirkhan-91]

@aikeda Doesn't seem to work for me.
In the template
<sebm-google-map #AgmMap ...

In the component
@ViewChild('AgmMap') agmMap; ngAfterViewInit() { console.log(this.agmMap); }

The object logged is of type SebmGoogleMap, it doesn't have any mapReady event to subscribe to.
Can you help out or post your code?

[gpolyn]

@aamirkhan-91 Confirm I get the same result as you

[pravinkumars]

@aamirkhan-91 @SebastianM I tried something similar for AgmCircle

I had <agm-circlce #circle ...

and tried referring it as @ViewChild('circle') AgmCircle;

I only get it as a ElementRef object and not as AgmCircle. I intend to use the getBounds() onNgInit() but it doesn't seem to work.

http://plnkr.co/edit/nG6lUsm1KLbQRv3SRdgW?p=preview

[acuntex]

Did you find any solution?
Every ViewChild has the correct type except AgmCircle which is an ElementRef

The documentation of this project is kind of ambiguous because it's just a "copy" of the code :(

[pravinkumars]

try with @ViewChild(AgmCircle) myCircle; It worked.

The selector was referenced wrongly in my earlier work

[SterlingMcCall]

@pravinkumars @acuntex
@ViewChild('circle', {read: AgmCircle}) circle: AgmCircle;
This allows you to get control of a specific circle with a named template variable like `

circle > `

[adrianhara]

In case anyone still has problems, you don't need even a @ViewChild, as the mapReady is an event on the map component, so in your template just do <agm-map (mapReady)="onMapReady($event)"... and in your component define the onMapReady(map) method.

[sivakavi-manureva]

@aikeda ,

[sivakavi-manureva]

its working. tan q

[drouck]

import { AgmMap } from '@agm/core/directives/map'