Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps SDK for iOS

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou choisir un projet
  2. Activer Google Maps SDK for iOS
  3. Créer les clés appropriées
Continuer

Styliser rapidement une carte - Mode nocturne

Cette page offre un guide rapide pour styliser votre carte en utilisant le mode nocturne comme exemple.

Présentation

Avec les options de style, vous pouvez personnaliser la présentation des styles de carte Google standard en modifiant le visuel de composants tels que les routes, les établissements et d'autres points d'intérêt. Cela signifie que vous pouvez faire ressortir des composants spécifiques sur la carte ou assortir la carte au style de votre application.

L'application de styles ne fonctionne qu'avec le type de carte kGMSTypeNormal.

Appliquer des styles à votre carte

Pour appliquer des styles de carte personnalisés à une carte, appelez GMSMapStyle(...) pour créer une instance GMSMapStyle, en transmettant une URL pour un fichier JSON local, ou une chaîne JSON contenant les définitions de style. Appliquez l'instance GMSMapStyle à la propriété mapStyle de la carte.

Utiliser un fichier JSON

Les exemples suivants montrent comment appeler GMSMapStyle(...) et transmettre une URL pour un fichier local :

Swift

L'échantillon de code suivant part du principe que votre projet contient un fichier nommé style.json :

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

L'échantillon de code suivant part du principe que votre projet contient un fichier nommé style.json :

#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

Pour définir les options de style, ajoutez un nouveau fichier nommé style.json à votre projet et collez la déclaration de style JSON suivante pour le style « mode nocturne » :

Utiliser une ressource de type chaîne

L'exemple suivant montre comment appeler GMSMapStyle(...) et transmettre une ressource de type chaîne :

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

Pour définir les options de style, collez la chaîne de style suivante en tant que valeur de la variable kMapStyle :

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

Pour définir les options de style, collez la chaîne de style suivante en tant que valeur de la variable kMapStyle :

Déclarations de style JSON

Les cartes stylisées utilisent deux concepts pour appliquer des couleurs et d'autres changements de style à une carte :

  • Les sélecteurs indiquent les composants géographiques que vous pouvez styliser sur la carte. Ceux-ci incluent les routes, les parcs, les plans d'eau, etc., ainsi que leurs libellés. Les sélecteurs incluent des composants et des éléments, spécifiés en tant que propriétés featureType et elementType.
  • Les stylers sont des propriétés de couleur et de visibilité que vous pouvez appliquer aux éléments de la carte. Ils définissent la couleur affichée via une combinaison entre teinte, couleur et valeurs de luminosité/gamma.

Voir la référence de style pour une description détaillée des options de style JSON.

Google Maps APIs Styling Wizard

Utilisez l'assistant Google Maps APIs Styling Wizard pour générer rapidement des objets de style JSON. Google Maps SDK for iOS prend en charge les mêmes déclarations de style que Google Maps JavaScript API.

Échantillons de code complets

Le référentiel ApiDemos sur GitHub inclut des échantillons qui montrent comment utiliser les styles :

Étape suivante

Découvrez comment masquer des composants sur une carte à l'aide de styles.

Envoyer des commentaires concernant…

Google Maps SDK for iOS
Google Maps SDK for iOS
Besoin d'aide ? Consultez notre page d'assistance.