Google Maps mit Ionic 2 und TypeScript

Ionic 2 bietet einen besseren Support für Cordova Plugins an, in dem man einfach die benötigten Definitionen aus ‚ionic-native‘ importiert.

z.B.

Leider funktionierte das Plugin bei mir nicht. Die Seite mit der Karte wurde noch halb angezeigt. Sie blieb mitten in der Transition stehen.

Also entschied ich mich, die normale JS Library zu verwenden. Da ich Ionic 2 mit TypeScript verwende, benötigte dies einige Schritte. Es genügt nicht, die Library wie früher im index.html einzubinden. Aber es ist natürlich noch immer nötig:

Type Definitions

Die Type Definitions findet man auf Github https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/googlemaps

Ich habe das File im Directory „typings“ in meiner Applikation abgelegt und den Path  in typings/index.d.ts definiert:

 

Map erstellen

Danach kann die Karte wie üblich erstellt werden. In meiner App werden die Koordination in navParams übergeben, welche dann in „eventData“ der eigenen Klasse „EventClass“ gehalten werden. Darin sind die Daten wie Lat/Lng und Title enthalten.

Die Karte erstelle ich in ionViewLoaded, da im Constructor noch nicht alle Dom-Elemente verfügbar sind. Typischerweise will Google Maps ein Element-Id, bei mir „mapId“

 

Urs Verfasst von:

2 Comments

  1. Thomas
    31. Juli 2016

    Hallo Urs,
    coole Sache. Nutzt Du zum Entwickeln der Ionic-apps Visual Studio Code?

    Grüsse
    Thomas

    • Urs
      31. Juli 2016

      Im Moment nutze ich noch NetBeans. NetBeans erkennt sofort die npm Settings und hat eine Chrome Debugging Extension. Chrome bietet auch ohne die Extension ein TypeScript Debugging an. Habe zuerst gestaunt. Aber Chrome findet die TypeScripts aufgrund der Mappings.
      Bei NetBeans müsste ich im Javascript die Breakpoints setzen. Das wäre mit Visual Studio Code besser.
      Sobald ich die Sonic-Native Plugins einsetze, benötige ich eh den Simulator und da spielt es keine Rolle mehr ob NetBeans oder Visual Studio Code.

      Fazit: NetBeans, weil ich es besser kenne.

Die Kommentare sind geschlossen