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

Marqueurs

Les marqueurs indiquent des points géographiques uniques sur la carte.

Par défaut, les marqueurs utilisent une icône standard basée sur l'identité visuelle de Google Maps. Si vous souhaitez personnaliser vos marqueurs, vous pouvez modifier la couleur du marqueur par défaut, remplacer l'image d'un marqueur par une icône personnalisée ou modifier d'autres propriétés des marqueurs.

Ajouter un marqueur

Pour ajouter un marqueur, créez un objet GMSMarker avec une position et un élément title, et définissez son élément map.

L'exemple suivant montre comment ajouter un marqueur à un objet GMSMapView existant. Le marqueur est créé aux coordonnées 10,10 et affiche la chaîne « Hello world » dans une fenêtre d'info si l'utilisateur clique dessus.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;

Vous pouvez animer l'ajout de nouveaux marqueurs à la carte en définissant la propriété marker.appearAnimation sur kGMSMarkerAnimationPop.

Supprimer un marqueur

Vous pouvez supprimer un marqueur d'une carte en définissant la propriété map de GMSMarker sur nil. Vous pouvez également supprimer toutes les superpositions (y compris les marqueurs) actuellement présents sur la carte en appelant la méthode GMSMapView clear.

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 6)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
...
[mapView clear];

Si vous voulez apporter des modifications à un marqueur après l'avoir ajouté à la carte, veillez à conserver l'objet GMSMarker. Vous pourrez modifier le marqueur ultérieurement en appliquant des changements à cet objet.

Swift

let marker = GMSMarker(position: position)
marker.map = mapView
...
marker.map = nil

Objective-C

GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
...
marker.map = nil

Changer la couleur d'un marqueur

Vous pouvez personnaliser la couleur de l'image du marqueur par défaut en demandant une version colorée de l'icône par défaut avec markerImageWithColor:, et en indiquant l'image obtenue dans la propriété d'icône de GMSMarker.

Swift

marker.icon = GMSMarker.markerImage(with: .black)

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];

Personnaliser l'image d'un marqueur

Si vous souhaitez modifier l'image par défaut du marqueur, vous pouvez définir une icône personnalisée en utilisant la propriété icon ou iconView du marqueur.

Si la propriété iconView est définie, l'API ignore la propriété icon. Les modifications de la propriété icon actuelle ne sont pas prises en compte tant que la propriété iconView est définie.

Utiliser la propriété icon du marqueur

L'extrait de code suivant créé un marqueur avec une icône personnalisée fournie en tant qu'élément UIImage dans la propriété icon. L'icône est centrée sur Londres, en Angleterre. Cet extrait part du principe que votre application contient une image appelée « house.png ».

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

Si vous créez plusieurs marqueurs avec la même image, utilisez la même instance de UIImage pour chacun des marqueurs. Cela améliore les performances de votre application lors de l'affichage de nombreux marqueurs.

Cette image peut avoir plusieurs cadres. En outre, la propriété alignmentRectInsets est respectée, ce qui s'avère utile si un marqueur possède une ombre ou une autre zone inutilisable.

Utiliser la propriété iconView du marqueur

L'extrait de code suivant crée un marqueur avec une icône personnalisée en définissant la propriété iconView du marqueur et modifie la couleur du marqueur au moyen d'une animation. Cet extrait part du principe que votre application contient une image appelée « house.png ».

Swift

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func loadView() {

    let camera = GMSCameraPosition.camera(withLatitude: 51.5,
                                          longitude: -0.127,
                                          zoom: 14)
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
      }, completion: {(finished) in
        // Stop tracking view changes to allow CPU to idle.
        self.london?.tracksViewChanges = false
    })
  }

Objective-C

#import "ViewController.h"
@import GoogleMaps;

@interface ViewController () <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation ViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView
    idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
                     _londonView.tintColor = [UIColor blueColor];
                   }
                   completion:^(BOOL finished) {
                     // Stop tracking view changes to allow CPU to idle.
                     _london.tracksViewChanges = NO;
                   }];
}

@end

Étant donné que la propriété iconView accepte un élément UIView, vous pouvez avoir une hiérarchie de commandes d'interface utilisateur standard qui définissent vos marqueurs, chaque vue étant associée à un ensemble standard de fonctionnalités d'animation. Vous pouvez inclure des modifications de la taille du marqueur, de sa couleur et de ses niveaux alpha, et appliquer également des transformations arbitraires. La propriété iconView prend en charge l'animation de toutes les propriétés de UIView qu'il est possible d'animer, à l'exception de frame et de center.

Veuillez prendre en compte les points suivants lorsque vous utilisez la propriété iconView :

  • L'élément UIView peut être très gourmand en ressources lorsque tracksViewChanges est défini sur YES, ce qui peut augmenter l'utilisation de la batterie. À titre de comparaison, une image simple UIImage ne nécessite pas plusieurs rendus.
  • Certains appareils auront des difficultés à afficher la carte s'il y a de nombreux marqueurs à l'écran, que chaque marqueur possède son propre élément UIView, et que tous les marqueurs suivent simultanément les changements.
  • L'élément iconView ne répond pas à l'interaction de l'utilisateur, car il ne s'agit que d'un instantané de la vue.
  • La vue se comporte comme si la propriété clipsToBounds était définie sur YES, quelle que soit sa valeur réelle. Vous pouvez appliquer des transformations qui fonctionnent en dehors des limites, mais l'objet que vous dessinez doit se trouver à l'intérieur des limites de l'objet. Toutes les transformations et tous les changements sont surveillés et appliqués. En résumé, les vues sous-jacentes doivent être contenues dans la vue principale.

Pour décider quand définir la propriété tracksViewChanges, vous devez tenir compte de l'impact sur la performance par rapport aux avantages d'avoir un marqueur qui est automatiquement redessiné. Par exemple :

  • Si vous avez une série de modifications à apporter, vous pouvez définir la propriété sur YES, puis la définir à nouveau sur NO.
  • Lorsqu'une animation est exécutée ou que les contenus sont chargés de manière asynchrone, vous devez maintenir la propriété sur YES jusqu'à ce que les actions soient terminées.

Modifier l'opacité du marqueur

Vous pouvez contrôler l'opacité du marqueur via sa propriété opacity. Vous devez définir l'opacité en tant que valeur flottante comprise entre 0.0 et 1.0, où 0 est totalement transparent et 1 totalement opaque.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

Vous pouvez animer l'opacité du marqueur avec Core Animation via le calque GMSMarkerLayer.

Aplatir un marqueur

Les icônes de marqueur sont normalement dessinées par rapport à l'écran de l'appareil plutôt que par rapport à la surface de la carte, c'est pourquoi une rotation , une inclinaison ou un zoom sur la carte ne changent pas nécessairement l'orientation du marqueur.

Vous pouvez définir l'orientation d'un marqueur pour qu'elle soit plane par rapport à la terre. Les marqueurs plats pivotent lorsque l'utilisateur fait pivoter la carte, et changent de perspective lorsque la carte est inclinée. À l'instar des marqueurs classiques, les marqueurs plats conservent leurs dimensions lorsque l'utilisateur effectue un zoom avant ou arrière sur la carte.

Pour changer l'orientation du marqueur, définissez la propriété flat du marqueur sur YES ou true.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.isFlat = true
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.flat = YES;
london.map = mapView;

Faire pivoter un marqueur

Vous pouvez faire pivoter un marqueur sur son point d'ancrage en définissant la propriété rotation. Spécifiez la rotation en tant que type CLLocationDegrees, exprimée en degrés dans le sens horaire à partir de la position par défaut. Lorsque le marqueur est plat sur la carte, la position par défaut est le nord.

L'exemple suivant fait pivoter le marqueur à 90°. En réglant la propriété groundAnchor sur 0.5,0.5, le marqueur pivote sur son centre et non sur sa base.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let degrees = 90.0
let london = GMSMarker(position: position)
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView;

Ajouter une fenêtre d'info

Utilisez une fenêtre d'info pour afficher des informations destinées à l'utilisateur lorsque celui-ci appuie sur un marqueur. Une seule fenêtre d'info s'affiche à la fois. Si un utilisateur touche un autre marqueur, la fenêtre d'info en cours est masquée pour laisser apparaître la nouvelle fenêtre d'info. Le contenu de la fenêtre d'info est défini par les propriétés title et snippet. Le fait de cliquer sur le marqueur n'entraîne pas l'affichage d'une fenêtre d'info si les propriétés title et snippet sont vides ou nil.

L'extrait de code ci-dessous crée un marqueur simple, avec uniquement un titre pour le texte de la fenêtre d'info.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;

Grâce à la propriété snippet, vous pouvez ajouter du texte supplémentaire qui apparaît sous le titre, dans une police plus petite. Les chaînes de texte qui sont plus longues que la largeur de la fenêtre d'info sont automatiquement renvoyées à la ligne. Les messages très longs sont susceptibles d'être tronqués.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

Configurer une fenêtre d'info pour qu'elle s'actualise automatiquement

Définissez la propriété tracksInfoWindowChanges du marqueur sur YES ou true si vous souhaitez que les nouvelles propriétés ou le contenu de la fenêtre d'info s'affiche immédiatement en cas de modification, sans avoir à attendre que la fenêtre d'info soit masquée puis de nouveau affichée. Elle est définie par défaut sur NO ou false.

Swift

marker.tracksInfoWindowChanges = true

Objective-C

marker.tracksInfoWindowChanges = YES;

Pour décider quand définir la propriété tracksInfoWindowChanges, vous devez comparer l'impact sur la performance par rapport aux avantages d'avoir une fenêtre d'info qui est automatiquement redessinée. Par exemple :

  • Si vous avez une série de modifications à apporter, vous pouvez définir la propriété sur YES, puis la définir à nouveau sur NO.
  • Lorsqu'une animation est exécutée ou que les contenus sont chargés de manière asynchrone, vous devez maintenir la propriété sur YES jusqu'à ce que les actions soient terminées.

Reportez-vous également aux points à prendre en compte lorsque vous utilisez la propriété iconView du marqueur.

Changer la position d'une fenêtre d'info

Une fenêtre d'info est dessinée avec une orientation par rapport à l'écran de l'appareil, centrée au-dessus du marqueur auquel elle est associée. Vous pouvez modifier la position de la fenêtre d'info par rapport au marqueur en définissant la propriété infoWindowAnchor. Cette propriété accepte un CGPoint, défini comme un décalage (x,y), où x et y sont compris entre 0.0 et 1.0. Le décalage par défaut est (0.5, 0.0), c'est-à-dire le centre supérieur. Le paramétrage du décalage infoWindowAnchor est utile pour aligner la fenêtre d'info par rapport à une icône personnalisée.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

Gérer les événements sur les marqueurs et les fenêtres d'info

Vous pouvez écouter des événements qui se produisent sur la carte, comme lorsqu'un utilisateur touche un marqueur ou une fenêtre d'info. Pour écouter ces événements, vous devez implémenter le protocole GMSMapViewDelegate. Voir le guide sur les événements et la liste des méthodes sur GMSMapViewDelegate. Pour les événements Street View, voir GMSPanoramaViewDelegate.

Envoyer des commentaires concernant…

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