Legacy-Beispiele

Android

Beispiel-App „ApiDemos“ ausführen

Informationen zum Ausführen der Beispiel-App „ApiDemos“ finden Sie im GitHub-Beispiel für Java und für Kotlin sowie in der CloudBasedMapStylingDemoActivity-Demo für Java und für Kotlin.

Es gibt eine Beispiel-App für Java bzw. für Kotlin, die zeigt, wie Sie Ihre Android-Karte über die Cloud gestalten können.

Bekannte Probleme

Sobald Ihre App an Kunden ausgeliefert wird, lassen sich benutzerdefinierte Stile für Karten mit Karten-IDs über die Google Cloud Console aktualisieren. Die neuen Stile erscheinen nach wenigen Stunden in der App.

Damit neue benutzerdefinierte Stile zu Testzwecken sofort angezeigt werden, müssen Sie die App-Daten von Ihrem Testgerät löschen. Weitere Informationen dazu finden Sie in der Android-Hilfe unter Speicherplatz freigeben.

Die Einstellungen können je nach Smartphone variieren. Weitere Informationen erhalten Sie vom Gerätehersteller.

iOS

Beispiel-App „ApiDemos“ ausführen

Informationen zum Ausführen der Beispiel-App „ApiDemos“ finden Sie im GitHub-Beispiel für die Google Maps-Beispiel-App und im Projekt CloudBasedMapStylingViewController (GitHub-Beispiel für Swift | Objective-C).

Optionales CocoaPod- oder GitHub-Demo für das cloudbasierte Gestalten von Karteninhalten

Anstatt bei null anzufangen, können Sie unsere Objective-C-Beispielanwendung ausprobieren, die zeigt, wie Sie Ihre iOS-Karte über die Cloud gestalten. Weitere Informationen finden Sie unter Objective-C-Beispiel.

Beta-Demo-App entwickeln

Wählen Sie in „Xcode“ die Schaltfläche zum Kompilieren, um das aktuelle Schema zu erstellen und anschließend auszuführen. Der Build erzeugt einen Fehler und fordert Sie auf, Ihren API-Schlüssel in die Datei SDKDemoAPIKey.h einzugeben.

Falls Sie noch keinen API-Schlüssel haben, richten Sie ein Projekt in der Cloud Console ein und fordern Sie einen API-Schlüssel an. Eine Anleitung dazu finden Sie unter API-Schlüssel anfordern. Beim Konfigurieren des Schlüssels in der Cloud Console können Sie die Bundle-ID Ihrer Anwendung angeben, damit nur Ihre Anwendung den Schlüssel verwenden kann. Die Standard-Bundle-ID der SDK-Beispiel-App lautet com.example.GoogleMapsDemos.

Bearbeiten Sie die Datei SDKDemoAPIKey.h und fügen Sie Ihren API-Schlüssel in die Definition der kAPIKey-Konstante ein:

static NSString *const kAPIKey = @"YOUR_API_KEY";

Wenn Sie von Xcode aufgefordert werden, die Datei SDKDemoAPIKey.h zum Bearbeiten zu entsperren, wählen Sie Entsperren aus.

Entfernen Sie folgende Zeile:

```
#error Register for API Key and insert here.
```

Erstellen Sie das Projekt und führen Sie es aus.

Karte für das cloudbasierte Gestalten von Karteninhalten – Demo

Die CloudStyling-Demo zeigt, wie Sie die Karte mithilfe eines in der Google Cloud Console festgelegten Stils gestalten.

Wenn die Demoanwendung gestartet wird, klicken Sie oben in der Liste im Abschnitt „Betabeispiele“ auf die Demo „Kartenanpassung“.

Klicken Sie auf Stilkarte, um zu sehen, wie sich das Laden verschiedener Karten-IDs auswirkt.

Sie können auch einen eigenen Stil hinzufügen („Stilkarte“ > „Neue Karten-ID hinzufügen“) und die aktualisierte Karte mit Ihrer benutzerdefinierten Karte aktualisieren.

JavaScript

Hier sehen Sie ein einfaches Beispiel für das Laden einer Karte mit benutzerdefinierten Stilen mithilfe einer Karten-ID. In diesem Fall referenziert die Maps JavaScript API die Karten-ID 8e0a97af9386fef, wenn die Karte geladen wird, und wendet automatisch den Kartenstil an, der mit dieser Karten-ID verknüpft ist.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js
Beispiel ansehen

Testbeispiel

Maps Static API

Eine Karten-ID ist eine Kennung, die einem bestimmten Kartenstil oder -element zugeordnet ist. In der Google Cloud Console können Sie einen Kartenstil konfigurieren und ihn mit einer Karten-ID verknüpfen. Wenn Sie dann in Ihrem Code auf eine Karten-ID verweisen, wird der verknüpfte Kartenstil in Ihrer App angezeigt. Bei allen folgenden Aktualisierungen des Stils wird in Ihrer App automatisch der neue Stil verwendet, ohne dass Ihre Kunden Änderungen vornehmen müssen.

  1. Wenn Sie die Funktionen für das cloudbasierte Gestalten von Karteninhalten mit einer vorhandenen Karte verwenden, die mit dem Parameter style angepasst wurde, müssen Sie diese entfernen, um potenzielle Konflikte mit zukünftigen Elementen zu vermeiden.

  2. Wenn Sie einer neuen oder vorhandenen Karte, für die eine unserer Web APIs verwendet wird, eine Karten-ID hinzufügen möchten, hängen Sie den URL-Parameter map_id an und legen Sie ihn auf Ihre Karten-ID fest. In diesem Beispiel wird gezeigt, wie Sie einer Karte mithilfe der Maps Static API eine Karten-ID hinzufügen.

    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />