bodo92
Aktives Mitglied
Hallo,
und zwar bin ich gerade dabei eine kleine App die ich in Angular.js geschrieben habe mit Angular 2 neu zu entwickeln. Ich habe hier jedoch ein Problem mit den Google Maps welches ich nicht lösen kann.
Die Komponenten werden in einer <md-tab-group> https://www.npmjs.com/package/@angular2-material/tabs eingebunden.
Dies hab ich der Verwendung eines Routers vorgezogen da ich dachte das somit eventuell alle Komponenten als "aktiv" angesehen werden und direkt initialisiert werden, dies ist jedoch nicht der Fall.
Nun zum eigentlichen Fehler: Die App lädt die Karte in der zuerst aufgerufenen Komponente ohne Fehler, beim Wechsel zu einer anderen Komponente und wieder zurück ist die Karte dann einfach grau und zeigt keine Regung mehr. Auch wird in der Konsole kein Fehler ausgegeben, ich Tippe mal darauf das der Scope der Komponente bei verlassen geleert wird und das Problem daher rührt, jedoch weiß ich mir gerade nicht zu Helfen.
Meine Component.ts sieht folgendermaßen aus:
das Zugehörige Template ist:
Vielen Dank vorab.
und zwar bin ich gerade dabei eine kleine App die ich in Angular.js geschrieben habe mit Angular 2 neu zu entwickeln. Ich habe hier jedoch ein Problem mit den Google Maps welches ich nicht lösen kann.
Die Komponenten werden in einer <md-tab-group> https://www.npmjs.com/package/@angular2-material/tabs eingebunden.
HTML:
<md-toolbar color="primary">
<h1>{{title}}</h1>
</md-toolbar>
<md-tab-group>
<md-tab>
<template md-tab-label>Einsatzdaten</template>
<template md-tab-content>
<app-operationdata></app-operationdata>
</template>
</md-tab>
<md-tab>
<template md-tab-label>Anfahrtskarte</template>
<template md-tab-content>
<app-drivemap></app-drivemap>
</template>
</md-tab>
</md-tab-group>
Nun zum eigentlichen Fehler: Die App lädt die Karte in der zuerst aufgerufenen Komponente ohne Fehler, beim Wechsel zu einer anderen Komponente und wieder zurück ist die Karte dann einfach grau und zeigt keine Regung mehr. Auch wird in der Konsole kein Fehler ausgegeben, ich Tippe mal darauf das der Scope der Komponente bei verlassen geleert wird und das Problem daher rührt, jedoch weiß ich mir gerade nicht zu Helfen.
Meine Component.ts sieht folgendermaßen aus:
Code:
import {Component, OnInit} from '@angular/core';
declare let google: any;
@Component({
selector: 'app-drivemap',
templateUrl: './drivemap.component.html',
styleUrls: ['./drivemap.component.css']
})
export class DrivemapComponent implements OnInit {
constructor() {
}
ngOnInit() {
let directionsService = new google.maps.DirectionsService;
let directionsDisplay = new google.maps.DirectionsRenderer;
let map = new google.maps.Map(document.getElementById('drive-map'), {
zoom: 14,
center: {lat: 49.555, lng: 10.715}
});
directionsDisplay.setMap(map);
setTimeout(function () {
onUpdate('Nürnberg', 'Berlin');
}, 1000);
function onUpdate(origin, destination) {
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}
}
das Zugehörige Template ist:
HTML:
<div class="flex-row">
<div class="flex-item">
<md-card class="no-padding">
<div id="drive-map"></div>
</md-card>
</div>
</div>
Vielen Dank vorab.