Karte mit benutzerdefinierten Stilen hinzufügen

Plattform auswählen: Android iOS JavaScript

Auf dieser Seite finden Sie eine Kurzanleitung zum Gestalten Ihrer Karte mit dem Nachtmodus als Beispiel.

Übersicht

Mit Stiloptionen können Sie die Darstellung der standardmäßigen Google-Kartenstile anpassen und die visuelle Darstellung von Merkmalen wie Straßen, Parks, Unternehmen und anderen POIs ändern. Das heißt, dass Sie bestimmte Komponenten der Karte hervorheben bzw. dafür sorgen können, dass die Karte zum Design Ihrer App passt.

Stile lassen sich nur für den Kartentyp kGMSTypeNormal verwenden.

Stile auf die Karte anwenden

Wenn Sie benutzerdefinierte Kartenstile auf eine Karte anwenden möchten, rufen Sie GMSMapStyle(...) auf, um eine GMSMapStyle-Instanz zu erstellen. Dabei übergeben Sie eine URL für eine lokale JSON-Datei oder einen JSON-String mit Stildefinitionen. Weisen Sie die Instanz GMSMapStyle dem Attribut mapStyle der Karte zu.

JSON-Datei verwenden

Die folgenden Beispiele zeigen, wie GMSMapStyle(...) aufgerufen und eine URL für eine lokale Datei übergeben wird:

Swift

import GoogleMaps

class MapStyling: 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

#import "MapStyling.h"
@import GoogleMaps;

@interface MapStyling ()

@end

@implementation MapStyling

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

Fügen Sie Ihrem Projekt eine neue Datei mit dem Namen style.json hinzu und fügen Sie die folgende JSON-Stildeklaration für den Stil im Nachtmodus ein, um die Stiloptionen zu definieren:

Stringressource verwenden

Die folgenden Beispiele zeigen, wie GMSMapStyle(...) aufgerufen und eine Stringressource übergeben wird:

Swift

class MapStylingStringResource: UIViewController {

  let MapStyle = "JSON_STYLE_GOES_HERE"

  // 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: MapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}
      

Objective-C

@implementation MapStylingStringResource

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

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

Zum Definieren der Stiloptionen fügen Sie den folgenden Stilstring als Wert der Variablen kMapStyle ein:

JSON-Stildeklarationen

Für Karten mit benutzerdefinierten Stilen kommen zwei Konzepte zum Einsatz, um Farben und andere Stiländerungen auf eine Karte anzuwenden:

  • Selektoren geben die geografischen Komponenten an, die auf der Karte mit einem Stil versehen werden können. Dazu gehören Straßen, Parks, Gewässer usw. sowie ihre Bezeichnungen. Die Selektoren enthalten Funktionen und Elemente, die als featureType- und elementType-Eigenschaften angegeben sind.
  • Styler sind Farb- und Sichtbarkeitseigenschaften, die auf Kartenelemente angewendet werden können. Damit definierst du die Anzeigefarbe, indem Farbton-, Farb- sowie Helligkeits-/Gammawerte kombiniert werden.

Eine ausführliche Beschreibung der JSON-Stiloptionen findest du in der Stilreferenz.

Maps Platform Styling Wizard

Mit dem Maps Platform Styling Wizard kannst du ganz einfach ein JSON-Stilobjekt generieren. Das Maps SDK for iOS unterstützt dieselben Stildeklarationen wie die Maps JavaScript API.

Vollständige Codebeispiele

Beispiele für die Verwendung von Stilen finden Sie im ApiDemos-Repository auf GitHub.

Was ist zu tun?

Kartenfunktionen mit Stilen ausblenden