[Angular 2] Google Maps

[bodo92]

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.

<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>

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:

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:

<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.

 

[Tronjer]

Habe ich mir jetzt mehrfach durchlesen müssen, um es zu verstehen.

Komponenten besitzen nicht nur OnInit, sondern insgesamt 8 Lifecycle Hooks. Ein DoCheck deckt so ziemlich alles ab und könnte wahrscheinlich auch deine Google-Map neu laden. Außerdem können beide Komponenten als ViewChild einer Parent-Komponente eingebettet werden und ein Event emitten, wenn man die Tabs anklickt, und sie können natürlich auch als Siblings kommunizieren, wenn man den Umweg über einen Service nimmt.

Kauf dir mal den Kurs hier. Der ist mit € 19,- gerade im Angebot und bietet einen sehr ausführlichen Einstieg in die Materie.
https://www.udemy.com/the-complete-guide-to-angular-2

 

[bodo92]

Habe schon das Tutorial vom Codeschool gemacht dieses kratzt jedoch nur ein bisschen an der Oberfläche.

Danke für den Tipp hab ich mir gleich gekauft mit Coupon sogar nur für 10€

 

[bodo92]

Ich hab das jetzt über einen Service gelöst, ein kurzes Feedback dazu wäre toll.

Im Service wird das DOM-Element gespeichert und beim reload der Component wird es bei vorhandensein einfach ersetzt.

Die Component: https://github.com/ebelmxi/AlarminfoTablet/tree/master/src/app/operation-map
Der Service: https://github.com/ebelmxi/AlarminfoTablet/blob/master/src/app/map.service.ts

Edit: erster Link war Fehlerhaft.

 

[Tronjer]

Geht das denn nicht anders? Direktes Adressieren von DOM-Elementen sollte der letzte Ausweg sein.

 

[bodo92]

Ich hab keine andere Möglichkeit gefunden dies anders zu lösen, die Alternative dazu wäre das Element bei jedem OnInit komplett neu zu erstellen.
Dies kann ich aber nicht da die Karte nach dem Initialisieren auch Offline funktionieren soll. (Die App läuft unter electron.atom.io auf einem Tablet, sie soll beim Feuerwehreinsatz den Gruppenführer unterstützen, nach dem Verlassen vom Gerätehaus besteht jedoch keine Internetverbindung mehr.)

Und @Tronjer vielen Dank für den Tipp mit den udemy Kurz der hat mich schon bisschen weiter gebracht.