Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Das Google Maps SDK for iOS aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Das Google Maps SDK for iOS aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Schnelle Kartenformatierung – Nachtmodus

Auf dieser Seite finden Sie eine Kurzanleitung zum Formatieren Ihrer Karte. Als Beispiel dient der Nachtmodus.

Übersicht

Mit Formatoptionen können Sie die Darstellung der Google-Standardkartenformate individuell gestalten, indem Sie die visuelle Anzeige von Merkmalen wie Straßen, Parks, Unternehmen und anderen Points of Interest ändern. Sie können also bestimmte Komponenten der Karte hervorheben bzw. die Formatierung der Karte an die Gestaltung Ihrer App anpassen.

Die Formatierung funktioniert nur für den Kartentyp kGMSTypeNormal.

Formatierungen auf Karte anwenden

Um benutzerdefinierte Kartenformatierungen auf eine Karte anzuwenden, rufen Sie GMSMapStyle(...) auf, um eine Instanz GMSMapStyle zu erstellen, und übergeben Sie dabei eine URL für eine lokale JSON-Datei oder eine JSON-Zeichenfolge mit Formatierungsdefinitionen. Weisen Sie die Instanz GMSMapStyle der Eigenschaft mapStyle der Karte zu.

Mit einer JSON-Datei

In den folgenden Beispielen wird gezeigt, wie GMSMapStyle(...) aufgerufen und eine URL für eine lokale Datei übergeben wird:

Swift

Im folgenden Codebeispiel wird davon ausgegangen, dass Ihr Projekt eine Datei mit dem Namen style.json enthält:

import UIKit
import GoogleMaps

class ViewController: UIViewController {

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing the URL of the local file.
      if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") {
        mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
      } else {
        NSLog("Unable to find style.json")
      }
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Objective C

Im folgenden Codebeispiel wird davon ausgegangen, dass Ihr Projekt eine Datei mit dem Namen style.json enthält:

#import "ViewController.h"
@import GoogleMaps;

@implementation ViewController

// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
  return UIStatusBarStyleLightContent;
}

- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.myLocationEnabled = YES;

  NSBundle *mainBundle = [NSBundle mainBundle];
  NSURL *styleUrl = [mainBundle URLForResource:@"style" withExtension:@"json"];
  NSError *error;

  // Set the map style by passing the URL for style.json.
  GMSMapStyle *style = [GMSMapStyle styleWithContentsOfFileURL:styleUrl error:&error];

  if (!style) {
    NSLog(@"The style definition could not be loaded: %@", error);
  }

  mapView.mapStyle = style;
  self.view = mapView;
}
@end

Um die Formatierungsoptionen zu definieren, fügen Sie dem Projekt mit dem Namen style.json eine neue Datei hinzu und fügen Sie die folgende JSON-Formatdeklaration für die Formatierung im Nachtmodus ein:

Mit einer Zeichenfolgenressource

In den folgenden Beispielen wird gezeigt, wie GMSMapStyle(...) aufgerufen und eine Zeichenfolgenressource übergeben wird:

Swift

import UIKit
import GoogleMaps

let kMapStyle = "[" +
"  {" +
"    \"featureType\": \"poi.business\"," +
"    \"elementType\": \"all\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }," +
"  {" +
"    \"featureType\": \"transit\"," +
"    \"elementType\": \"labels.icon\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }" +
"]"
class ViewController: UIViewController {

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing a valid JSON string.
      mapView.mapStyle = try GMSMapStyle(jsonString: kMapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Für die Definition von Formatoptionen fügen Sie die folgende Formatierungszeichenfolge als Wert der Variablen kMapStyle ein:

Objective C

#import "ViewController.h"
@import GoogleMaps;

// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";

@implementation ViewController

// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
  return UIStatusBarStyleLightContent;
}

- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.myLocationEnabled = YES;

  NSError *error;

  // Set the map style by passing a valid JSON string.
  GMSMapStyle *style = [GMSMapStyle styleWithJSONString:kMapStyle error:&error];

  if (!style) {
    NSLog(@"The style definition could not be loaded: %@", error);
  }

  mapView.mapStyle = style;
  self.view = mapView;
}

@end

Für die Definition von Formatoptionen fügen Sie die folgende Formatierungszeichenfolge als Wert der Variablen kMapStyle ein:

JSON-Formatdeklarationen

Für formatierte Karten kommen zwei Konzepte zum Einsatz, um Farben und andere Formatänderungen für eine Karte anzuwenden:

  • Selektoren geben die geografischen Komponenten an, die Sie auf der Karte formatieren können. Dazu gehören Straßen, Parks, Gewässer usw. sowie deren Beschriftungen. Die Selektoren umfassen Merkmale und Elemente, die als die Eigenschaften featureType und elementType angegeben werden.
  • Styler sind Farb- und Sichtbarkeitseigenschaften, die auf die Kartenelemente angewendet werden können. Mit ihnen definieren Sie die Anzeigefarbe, indem Sie Farbton-, Farb- sowie Helligkeits-/Gammawerte kombinieren.

Eine detaillierte Beschreibung der JSON-Formatierungsoptionen finden Sie in der Formatreferenz.

Google Maps APIs Styling Wizard



Mit dem Google Maps APIs Styling Wizard können Sie schnell ein JSON-Formatierungsobjekt generieren. Das Google Maps SDK for iOS unterstützt die gleichen Formatdeklarationen wie die Google Maps JavaScript API.

Vollständige Codebeispiele

Das ApiDemos-Repository auf GitHub enthält Beispiele, in denen die Verwendung der Formatierung demonstriert wird.

Nächster Schritt

Weitere Informationen erhalten Sie unter Ausblenden von Kartenmerkmalen mit Formatierung.

Feedback geben zu...

Google Maps SDK for iOS
Google Maps SDK for iOS