Repères

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Sélectionnez une plate-forme: Android iOS JavaScript

Les repères indiquent des emplacements uniques sur la carte.

Par défaut, les repères utilisent une icône standard ayant l'apparence Google Maps. Si vous souhaitez personnaliser votre repère, vous pouvez modifier sa couleur, remplacer l'image du repère par une icône personnalisée ou modifier d'autres propriétés du repère.

En réponse à un événement de clic sur un repère, vous pouvez ouvrir une fenêtre d'informations. Une fenêtre d'informations affiche du texte ou des images dans une fenêtre pop-up au-dessus du repère. Vous pouvez utiliser une fenêtre d'informations par défaut pour afficher du texte, ou créer votre propre fenêtre d'informations personnalisée pour contrôler complètement son contenu.

Ajouter un repère

Pour ajouter un repère, créez un objet GMSMarker incluant un position et un title, puis définissez son map.

L'exemple suivant montre comment ajouter un repère à un objet GMSMapView existant. Le repère est créé aux coordonnées 10,10 et affiche la chaîne"Hello World"dans une fenêtre d'informations lorsque 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 repères sur la carte en définissant la propriété marker.appearAnimation sur:

  • kGMSMarkerAnimationPop pour déclencher l'affichage du repère par son groundAnchor lorsqu'il est ajouté.
  • kGMSMarkerAnimationFadeIn pour que le repère apparaisse en fondu lorsqu'il est ajouté.

Supprimer un repère

Vous pouvez supprimer un repère de la carte en définissant la propriété map du GMSMarker sur nil. Vous pouvez également supprimer toutes les superpositions (y compris les repères) actuellement 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 souhaitez modifier un repère après l'avoir ajouté à la carte, veillez à conserver l'objet GMSMarker. Vous pourrez modifier le repère ultérieurement en modifiant cet objet.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

Modifier la couleur d'un repère

Vous pouvez personnaliser la couleur de l'image par défaut du repère en demandant une version teinte de l'icône par défaut avec markerImageWithColor: et en transmettant l'image obtenue à la propriété d'icône GMSMarker.

Swift

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

Objective-C

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

Personnaliser l'image du repère

Si vous souhaitez modifier l'image par défaut du repère, vous pouvez définir une icône personnalisée à l'aide de la propriété icon ou iconView du repère.

Si iconView est défini, l'API ignore la propriété icon. Les mises à jour du icon actuel ne sont pas reconnues tant que le iconView est défini.

Utilisation de la propriété `icon` du repère

L'extrait de code suivant crée un repère avec une icône personnalisée fournie en tant que UIImage dans la propriété icon. L'icône est centrée sur Londres, en Angleterre. L'extrait suppose que votre application contient une image nommée &house.png.

Swift

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

Objective-C

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

Si vous créez plusieurs repères avec la même image, utilisez la même instance de UIImage pour chacun d'eux. Cela permet d'améliorer les performances de votre application lors de l'affichage de nombreux repères.

Cette image peut avoir plusieurs cadres. En outre, la propriété alignmentRectInsets est respectée, ce qui est utile si un repère contient une ombre ou une autre région inutilisable.

Utilisation de la propriété `iconView` du repère

L'extrait de code suivant crée un repère avec une icône personnalisée en définissant la propriété iconView du repère, et anime une modification de la couleur du repère. L'extrait suppose que votre application contient une image nommée &house.png.

Swift

import CoreLocation
import GoogleMaps

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

  override func viewDidLoad() {
    super.viewDidLoad()

    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 CoreLocation;
@import GoogleMaps;

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

@implementation MarkerViewController {
  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:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

Comme iconView accepte un UIView, vous pouvez avoir une hiérarchie de commandes d'interface utilisateur standard définissant vos repères, chaque vue ayant l'ensemble standard de fonctionnalités d'animation. Vous pouvez inclure des modifications apportées à la taille du repère, à sa couleur et à ses niveaux alpha, ainsi qu'à l'application de transformations arbitraires. La propriété iconView accepte les animations de toutes les propriétés animées de UIView, à l'exception de frame et center.

Veuillez tenir compte des points suivants lorsque vous utilisez iconView:

  • UIView peut demander des ressources lorsque tracksViewChanges est défini sur YES, ce qui peut augmenter l'utilisation de la batterie. En revanche, un seul élément UIImage est statique et n'a pas besoin d'être à nouveau affiché.
  • Certains appareils peuvent avoir du mal à afficher la carte si vous avez de nombreux repères à l'écran, et que chaque repère a son propre UIView, et que tous les repères suivent les modifications en même temps.
  • Un iconView ne répond pas aux interactions des utilisateurs, car il s'agit d'un instantané de la vue.
  • La vue se comporte comme si clipsToBounds était défini 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 tracez doit se trouver dans les limites de l'objet. Toutes les transformations/shifts sont surveillées et appliquées. En bref, les vues secondaires doivent être contenues dans la vue.

Pour décider quand définir la propriété tracksViewChanges, vous devez évaluer les considérations liées aux performances par rapport aux avantages d'une redéfinition automatique du repère. Exemple :

  • Si vous avez plusieurs modifications à effectuer, vous pouvez remplacer la propriété par YES, puis repasser à NO.
  • Lorsqu'une animation est en cours d'exécution ou que le contenu est chargé de manière asynchrone, vous devez définir la propriété sur YES jusqu'à la fin des actions.

Modifier l'opacité du repère

Vous pouvez contrôler l'opacité d'un repère avec sa propriété opacity. Vous devez spécifier l'opacité sous la forme d'une 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 repère avec Core Animation via l'élément GMSMarkerLayer.

Aplatir un repère

Les icônes de repère sont généralement orientées par rapport à l'écran de l'appareil et non à la surface de la carte. Par conséquent, la rotation, l'inclinaison ou le zoom de la carte ne changent pas nécessairement l'orientation du repère.

Vous pouvez définir l'orientation d'un repère pour qu'elle soit plane par rapport à la Terre. Les repères plats alternent lorsque vous faites pivoter la carte, et changent de perspective lorsque la carte est inclinée. Comme pour les repères classiques, les repères plats conservent leur taille lorsque l'utilisateur effectue un zoom avant ou arrière sur la carte.

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

Swift

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

Objective-C

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

Faire pivoter un repère

Vous pouvez faire pivoter un repère autour de son point d'ancrage en définissant la propriété rotation. Spécifiez la rotation en tant que type CLLocationDegrees, mesuré en degrés dans le sens des aiguilles d'une montre à partir de la position par défaut. Lorsque le repère est plat sur la carte, la position par défaut est le nord.

L'exemple suivant fait pivoter le repère de 90°. Si vous définissez la propriété groundAnchor sur 0.5,0.5, le repère pivotera sur son centre, et non sur sa base.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

Gérer les événements sur des repères

Vous pouvez écouter les événements qui se produisent sur la carte, comme le fait qu'un utilisateur appuie sur un repère. Pour écouter des événements, vous devez implémenter le protocole GMSMapViewDelegate. Consultez le guide des événements et la liste des méthodes sur le GMSMapViewDelegate. Pour les événements Street View, consultez la GMSPanoramaViewDelegate.