Angular-google-maps: agm-map not render in subcomponent

[nihaadk]

I have a section in my page this toggelt and in this page a have a AGM that not rendering? What is the problem ?

I only have this in my sub component:

<agm-map [latitude]="56" [longitude]="10"> </agm-map>

[mitul69]

Hi,
Import following in you component.ts

import { AgmMap } from '@agm/core';

Then before your construction get ViewChild like bellow.

@ViewChild(AgmMap)
public agmMap: AgmMap

And when you show your section then called resize trigger like.

this.agmMap.triggerResize();

[nihaadk]

Thank you

[sam08153]

this is not working

[EugeneSnihovsky]

@sam08153 I solved this problem by adding height to component

agm-map {
    height: 300px;
}

[tharun05]

agm maps are breaking in angular 5 version when i use agm direction.

[kantagara]

Anyone found a solution?

[rohitgrover]

I have used the map component as a child component. and in parent component i have called map component using
@ViewChild(MapComponent) mapcomponent: MapComponent;
and we can access any property of child component in parent component using.
ex- this.mapcomponent.latitude;

[dannnnthemannnn]

I am also having issues with this not working:

In my controller:
@ViewChild(AgmMap) public agmMap: AgmMap;

In ngAfterViewInit:
console.log(this.agmMap); this.agmMap.triggerResize();

In my template:
<agm-map [latitude]="lat" [longitude]="lng"> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> </agm-map>

When I run it it just shows that agmMap is undefined. I was able to get an elementRef for it using @ViewChild('agmMap') and annotating it with #agmMap.

I'm not sure what "MapComponent" @rohitgrover is referencing. Any ideas?

[dannnnthemannnn]

Turns out it was because I included the AgmCoreModule.forRoot in my root module of my application and not in the actual module I was using it in. How do people usually do this? Do they include it multiple times for each component they are using AgmMap in?

[lazarljubenovic]

@ravindranath143 The issue has been closed and answered multiple times. Your solution is almost line by line taken from the getting started guide. It adds nothing to the discussion. Please refer from commenting if you have nothing to add since it adds clutter and slows down tracking down actual issues in the lib. Thanks!

[iknox27]

with ionic cordova build android --prod --release

vendor.js:1 ERROR TypeError: r is not a constructor
at qe (vendor.js:1)
at ze (vendor.js:1)
at vn (vendor.js:1)
at Object.fn [as createEmbeddedView] (vendor.js:1)
at e.createEmbeddedView (vendor.js:1)
at t.createEmbeddedView (vendor.js:1)
at t._updateView (vendor.js:1)
at t.set [as ngIf] (vendor.js:1)
at Ge (vendor.js:

and my code:

[minZoom]="5" [maxZoom]="18" [streetViewControl]="false" (zoomChange)="zoomchanged($event)" #map>

<agm-direction *ngIf="!dir" [origin]="dir.origin" 
[destination]="dir.destination" [drivingOptions]="drivingOptions" [renderOptions]="options" 
[markerOptions]="markerOpts" [travelMode]="travelMode" ></agm-direction>

[FouomaOscar]

If your are using a shared module and if the module where you declared your component (where you want to integrate agm) using this shared module, you will just need to add AgmCoreModule in this shared module