Kolumne: XAML Expertise

XAML-Tipp: UWP – Google Maps API einbinden
2 Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „UWP: Google Maps API einbinden“

Für Windows-10-Apps steht ein umfangreiches Kartensteuerelement, das MapControl, zur Verfügung. Es nutzt per Standard die Bing Maps und das Bing Maps API. Das Ändern von Bing Maps auf Google Maps lässt sich einfach beim MapControl einstellen. Der Zugriff auf das Google Maps API hingegen ist nicht so leicht möglich. Das kostenlose GMaps UWP SDK ermöglicht jedoch den Zugriff auf das Google Maps API mit nur wenigen Zeilen Code.

Das GMaps UWP SDK wird wie üblich über NuGet installiert. Beim Ausführen der App wird eine Initialisierung mit einem API Key benötigt. Diesen erhält man nach dem Registrieren der App auf der Google-Dev-Seite. Wichtig: Für die Nutzung von Kartendiensten fallen unterschiedliche Gebühren an, wenn die Anwendung in den produktiven Einsatz kommt.

UWP: Google Maps API einbinden

Zum Initialisieren eignet sich der Haupteinstiegspunkt der App unter der App.xaml.cs-Datei mit der folgenden Zeile Code: GMapsUWP.Initializer.Initialize("Your_API_KEY_HERE", "de-DE");

Im nächsten Schritt wird das MapControl in XAML deklariert (Listing 1). Für das Deaktivieren einer Meldung wird ebenfalls ein Bing-Maps-API-Token benötigt. Jedoch fallen hierbei keine zusätzlichen Gebühren an, da im Anschluss auf Google Maps umgestellt wird. Dazu wird über die TileSources Property der URL-Service hinterlegt. In Listing 2 zeigt der dazugehörige Code, wie diese Einstellung über die Code-Behind-Datei durchgeführt wird.

...
xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"
...
<maps:MapControl x:Name="Map" MapServiceToken="Bing_Maps_API_Token_To_Remove_MapControl_Error" />
Map.Style = MapStyle.None;
Map.TileSources.Clear();
string mapuri = "http://mt1.google.com/vt/lyrs=r&hl=x-local&z={zoomlevel}&x={x}&y={y}";
Map.TileSources.Add(new MapTileSource(new HttpMapTileDataSource(mapuri)));

Jetzt stehen einige interessante Google-Maps-APIFunktionalitäten zur Verfügung. Eine davon ist Point of Interesst (POI). Um sie zu nutzen, wird einfach das MapTapped-Event abonniert, und über die args.Location erhält man die aktuelle Position, an der der Benutzer gerade auf die Karte geklickt hat. In Listing 3 und Abbildung 1 wird veranschaulicht, wie die angeklickte Position auf dem Bildschirm angezeigt wird.

var GeoCodeResult = await GMapsUWP.GeoCoding.GeocodeHelper.GetAddress(args.Location);
await new MessageDialog(GeoCodeResult).ShowAsync();
Abb. 1: Die Adresse der angeklickten Position

Abb. 1: Die Adresse der angeklickten Position

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -