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.
1 |
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarker, GoogleMapsMarkerOptions, CameraPosition} from 'ionic-native'; |
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:
1 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=myApiKey1234"></script> |
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:
1 |
/// <reference path="google.maps.d.ts" /> |
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“
1 2 3 4 |
<ion-content padding class="event"> <h3>{{eventData.location}}</h3> <div id="mapId"></div> </ion-content> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
export class MapPage { eventData: EventClass; map: google.maps.Map; constructor(private nav: NavController, private navParams: NavParams) { this.eventData = navParams.data; } ionViewLoaded() { console.log("starting to create the map"); let latLng = new google.maps.LatLng(this.eventData.latitude, this.eventData.longitude); let mapOptions = { center: latLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP } this.map = new google.maps.Map(document.getElementById("mapId"), mapOptions); let marker = new google.maps.Marker({ position: latLng, animation: google.maps.Animation.DROP, map: this.map, title: this.eventData.title }); } |
Hallo Urs,
coole Sache. Nutzt Du zum Entwickeln der Ionic-apps Visual Studio Code?
Grüsse
Thomas
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.