Agm-Direction
Agm-Direction copied to clipboard
agm-direction is freezing my application or won't load. Is this a library issue?
I'm having issues with agm-direction. When I use agm-direction component inside agm-marker, my page won't load or would be stuck. I've check every for an answer before deciding to ask this question.
package.json
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"agm-direction": "^0.7.6",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
app.module.ts
declarations: [
AppComponent,
PropertyMapComponent,
MapWrapperComponent
],
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: apiKey,
libraries: ['places', 'geometry']
}),
AgmDirectionModule,
AppRoutingModule
],
providers: [GoogleMapsAPIWrapper],
bootstrap: [AppComponent]
})
export class AppModule { }
map.component.html
<agm-map [latitude]="destination.lat" [longitude]="destination.lng">
<agm-marker [latitude]="destination.lat" [longitude]="destination.lng"></agm-marker>
<agm-marker [latitude]="origin.lat" [longitude]="origin.lng"></agm-marker>
<agm-direction [origin]="origin" [destination]="destination"></agm-direction>
</agm-map>
map.component.ts
public get origin(): any {
return { lat: 25.7782341, lng: -80.1867595 };
}
public get destination(): any {
return { lat: 25.7616798, lng: -80.1917902 };
}
I'm not getting any errors. The page either won't load, or would be stuck.
Try this:
ngOnInit() {
// initial
this.getDirection();
}
getDirection() {
this.origin = { lat: 25.7782341, lng: -80.1867595 };
this.destination = { lat: 25.7616798, lng: -80.1917902 };
}
Yes that was able to work. Thank you. Why do I have to assign the variable inside ngOnInit lifecycle? What happens if you want to pass the origin and destination as an Input() to a component?