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

Marker

Standorte auf der Karte werden mithilfe von Markern angezeigt.

Standardmäßig wird für Marker ein Standardsymbol mit dem üblichen Erscheinungsbild von Google Maps verwendet. Wenn Sie Ihren Marker anpassen möchten, können Sie die Farbe des Standardmarkers ändern oder das Markerbild durch ein benutzerdefiniertes Symbol ersetzen oder die Eigenschaften des Markers ändern.

Marker hinzufügen

Wenn Sie einen Marker hinzufügen möchten, erstellen Sie ein Objekt GMSMarker, das eine position und einen title enthält, und legen die map fest.

Im folgenden Beispiel wird gezeigt, wie ein Marker zu einem vorhandenen Objekt GMSMapView hinzugefügt wird. Der Marker wird an den Koordinaten 10,10 erstellt und zeigt, wenn er angeklickt wird, die Zeichenfolge „Hello world“ in einem Info-Fenster an.

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;

Sie können das Hinzufügen neuer Marker zur Karte animieren, indem Sie die Eigenschaft marker.appearAnimation auf kGMSMarkerAnimationPop festlegen.

Marker entfernen

Sie können einen Marker von der Karte entfernen, indem Sie die Eigenschaft map des GMSMarker auf nil festlegen. Sie können auch alle Überlagerungen (einschließlich Markern), die sich zurzeit auf der Karte befinden, entfernen, indem Sie die GMSMapView-Methode clear aufrufen.

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];

Wenn Sie Änderungen an einem Marker vornehmen möchten, nachdem Sie ihn zur Karte hinzugefügt haben, achten Sie darauf, das Objekt GMSMarker aufzubewahren. Sie können den Marker zu einem späteren Zeitpunkt bearbeiten, indem Sie Änderungen an diesem Objekt vornehmen.

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

Die Markerfarbe ändern

Sie können die Farbe des Standardmarkerbilds anpassen, indem Sie mit markerImageWithColor: eine farbige Version des Standardsymbols anfordern und das resultierende Bild an die Symboleigenschaft von GMSMarker übergeben.

Swift

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

Objective-C

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

Markerbild anpassen

Wenn Sie das Standardmarkerbild ändern möchten, können Sie mit der Eigenschaft icon oder iconView des Markers ein benutzerdefiniertes Symbol festlegen.

Wenn iconView festgelegt ist, ignoriert die API die Eigenschaft icon. Aktualisierungen der aktuellen Eigenschaft icon werden nicht erkannt, solange die Eigenschaft iconView festgelegt ist.

Die Eigenschaft icon des Markers verwenden

Mit dem folgenden Snippet wird ein Marker mit einem benutzerdefinierten Symbol erstellt, das als UIImage in der Eigenschaft icon angegeben ist. Das Symbol ist auf London, England zentriert. Im Snippet wird vorausgesetzt, dass Ihre Anwendung ein Bild mit dem Namen „house.png“ enthält.

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;

Wenn Sie mehrere Marker mit demselben Bild erstellen, verwenden Sie für jeden dieselbe Instanz von UIImage. Auf diese Weise verbessern Sie die Leistung der Anwendung beim Anzeigen mehrerer Marker.

Das Bild kann mehrere Frames haben. Darüber hinaus wird die Eigenschaft alignmentRectInsets zugelassen, die nützlich ist, wenn ein Marker einen Schatten oder einen anderen nicht verwendbaren Bereich hat.

Die Eigenschaft iconView des Markers verwenden

Mit dem folgenden Snippet wird ein Marker mit einem benutzerdefinierten Symbol erstellt, indem die Eigenschaft iconView des Markers festgelegt und eine Farbänderung des Markers animiert wird. Im Snippet wird vorausgesetzt, dass Ihre Anwendung ein Bild mit dem Namen „house.png“ enthält.

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

Da die Eigenschaft iconView ein Element UIView akzeptiert, können Sie über eine Hierarchie von standardmäßigen Steuerelementen der Benutzeroberfläche verfügen, die Ihre Marker definieren, wobei jede Ansicht über einen Standardsatz von Animationsfunktionen verfügt. Sie können Änderungen an der Größe, der Farbe und den Alpha-Ebenen der Marker vornehmen sowie beliebige Transformationen anwenden. Die Eigenschaft iconView unterstützt die Animation sämtlicher animierbaren Eigenschaften des Elements UIView mit Ausnahme von frame und center.

Beachten Sie die folgenden Aspekte bei der Verwendung von iconView:

  • Das Element UIView kann Ressourcen beanspruchen, wenn tracksViewChanges auf YES festgelegt ist. Dies kann einen höheren Akkuverbrauch zur Folge haben. Im Vergleich dazu ist ein einzelner Frame UIImage statisch und muss nicht erneut wiedergegeben werden.
  • Auf einigen Geräten gestaltet sich die Wiedergabe der Karte schwierig, wenn viele Marker auf dem Bildschirm vorhanden sind, jeder Marker über ein eigenes Element UIView verfügt und alle Marker gleichzeitig Änderungen erfassen.
  • Eine Eigenschaft iconView reagiert nicht auf die Benutzerinteraktion, da es sich dabei einfach um einen Snapshot der Ansicht handelt.
  • Die Ansicht verhält sich so, als sei clipsToBounds auf YES festgelegt, und zwar unabhängig vom tatsächlichen Wert. Sie können Transformationen anwenden, die außerhalb der Grenzen funktionieren. Das Objekt, das Sie zeichnen, muss sich aber innerhalb der Grenzen des Objekts befinden. Alle Transformationen/Verschiebungen werden überwacht und angewendet. Kurz gesagt: Unteransichten müssen in der Ansicht enthalten sein.

Um zu entscheiden, wann die Eigenschaft tracksViewChanges festzulegen ist, sollten Sie zwischen Leistungsaspekten und den Vorteilen, die es bietet, wenn die Marker automatisch erneut gezeichnet werden, abwägen. Beispiel:

  • Falls Sie mehrere Änderungen durchführen müssen, können Sie die Eigenschaft in YES und dann wieder zurück in NO ändern.
  • Wenn eine Animation ausgeführt wird oder die Inhalte asynchron geladen werden, sollten Sie die Einstellung YES der Eigenschaft so lange beibehalten, bis die Aktionen abgeschlossen sind.

Markerdeckkraft anpassen

Sie können die Deckkraft eines Markers mithilfe seiner Eigenschaft opacity steuern. Sie sollten die Deckkraft als Gleitkommawert zwischen 0,0 und 1,0 angeben, wobei 0 vollständig transparent und 1 vollständig deckend bedeutet.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

Sie können die Markerdeckkraft mit Core Animation über GMSMarkerLayer animieren

Marker vereinfachen

Markersymbole werden normalerweise mit Bezug zum Bildschirm des Geräts und nicht zur Kartenoberfläche gezeichnet, sodass das Drehen, Neigen oder Vergrößern der Karte die Ausrichtung des Markers nicht unbedingt ändert.

Sie können die Ausrichtung eines Markers so festlegen, dass dieser flach auf der Erdoberfläche liegt. Flache Marker drehen sich, wenn die Karte gedreht wird, und ändern die Perspektive, wenn die Karte geneigt wird. Ebenso wie übliche Marker behalten flache Marker ihre Größe bei, wenn die Karte vergrößert oder verkleinert wird.

Um die Ausrichtung des Markers zu ändern, setzen Sie die Markereigenschaft flat auf YES oder 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;

Marker drehen

Sie können einen Marker um seinen Ankerpunkt drehen, indem Sie die Eigenschaft rotation festlegen. Geben Sie die Drehung als Typ CLLocationDegrees an, gemessen in Grad im Uhrzeigersinn ausgehend von der Standardposition. Wenn der Marker flach auf der Karte liegt, ist Norden die Standardposition.

Im folgenden Beispiel wird der Marker um 90° gedreht. Indem Sie die Eigenschaft groundAnchor auf 0.5,0.5 setzen, wird der Marker um seine Mitte und nicht mehr um seine Grundlinie gedreht.

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;

Info-Fenster hinzufügen

Verwenden Sie ein Info-Fenster, um Informationen zu Nutzern anzuzeigen, wenn diese auf einen Marker tippen. Es wird immer nur ein Info-Fenster gleichzeitig angezeigt. Wenn ein Nutzer auf einen weiteren Marker tippt, wird das aktuelle Fenster ausgeblendet und das neue Info-Fenster geöffnet. Der Inhalt des Info-Fensters wird durch die Eigenschaften title und snippet definiert. Sind sowohl die Eigenschaft title als auch snippet leer oder nil, wird beim Klicken auf den Marker kein Info-Fenster angezeigt.

Mit dem folgenden Snippet wird ein einfacher Marker mit einem Titel als Text des Info-Fensters erstellt.

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;

Mithilfe der Eigenschaft snippet können Sie zusätzlichen Text hinzufügen, der in kleinerer Schrift unter dem Titel erscheint. Zeichenfolgen, die über die Breite des Info-Fenster hinausgehen, werden automatisch über mehrere Zeilen umgebrochen. Sehr lange Nachrichten können gekürzt werden.

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;

Automatische Aktualisierung eines Info-Fensters festlegen

Legen Sie tracksInfoWindowChanges für den Marker auf YES oder true fest, wenn neue Eigenschaften oder die Inhalte des Info-Fensters , wenn sie geändert werden, sofort angezeigt werden sollen, statt zu warten, bis das Info-Fenster ausgeblendet und anschließend wieder angezeigt wird. Die Standardeinstellung ist NO oder false.

Swift

marker.tracksInfoWindowChanges = true

Objective-C

marker.tracksInfoWindowChanges = YES;

Um zu entscheiden, wann die Eigenschaft tracksInfoWindowChanges festzulegen ist, sollten Sie zwischen Leistungsaspekten und den Vorteilen, die es bietet, wenn das Info-Fenster automatisch erneut gezeichnet wird, abwägen. Beispiel:

  • Falls Sie mehrere Änderungen durchführen müssen, können Sie die Eigenschaft in YES und dann wieder zurück in NO ändern.
  • Wenn eine Animation ausgeführt wird oder die Inhalte asynchron geladen werden, sollten Sie die Einstellung YES der Eigenschaft so lange beibehalten, bis die Aktionen abgeschlossen sind.

Wenn Sie die Eigenschaft iconView des Markers verwenden, lesen Sie auch die zu berücksichtigenden Aspekte.

Die Position eines Info-Fensters ändern

Die Darstellung eines Info-Fensters ist am Bildschirm des Geräts ausgerichtet und über dem zugehörigen Marker zentriert. Durch Festlegen der Eigenschaft infoWindowAnchor können Sie die Position des Info-Fensters im Verhältnis zum Marker verändern. Diese Eigenschaft akzeptiert einen CGPoint, der als (x,y) Offset mit x und y zwischen 0,0 und 1,0 definiert ist. Der Standardoffset ist (0,5, 0,0), d. h. oben Mitte. Das Festlegen des Offsets infoWindowAnchor ist nützlich, wenn Sie das Info-Fenster an einem benutzerdefinierten Symbol ausrichten möchten.

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;

Ereignisse bei Markern und Info-Fenstern verarbeiten

Sie können auf Ereignisse warten, die auf der Karte auftreten, z. B. wenn ein Benutzer auf einen Marker oder ein Info-Fenster tippt. Dazu müssen Sie das Protokoll GMSMapViewDelegate implementieren. Weitere Informationen dazu erhalten Sie im Leitfaden Ereignisse und in der Liste mit Methoden im GMSMapViewDelegate. Informationen zu Street View-Ereignissen finden Sie im GMSPanoramaViewDelegate.

Feedback geben zu...

Google Maps SDK for iOS
Google Maps SDK for iOS