Karte gestalten

Plattform auswählen: Android iOS JavaScript

In diesem Dokument wird beschrieben, wie Sie das Erscheinungsbild einer Karte anpassen und die Datensichtbarkeit und die Optionen für den Darstellungsbereich steuern. Dazu haben Sie folgende Möglichkeiten:

  • Cloudbasiertes Gestalten von Karteninhalten verwenden
  • Kartenstiloptionen direkt in Ihrem eigenen Code festlegen

Karte mit cloudbasiertem Gestalten von Karteninhalten gestalten

Wenn Sie einen Kartenstil auf Ihre JavaScript-Karte für die gemeinsame Nutzung von Fahrten anwenden möchten, geben Sie beim Erstellen von JourneySharingMapView eine mapId und alle anderen mapOptions an.

Die folgenden Beispiele zeigen, wie Sie einen Kartenstil mit einer Karten-ID anwenden.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Karten direkt in Ihrem eigenen Code gestalten

Sie können den Kartenstil auch anpassen, indem Sie beim Erstellen der JourneySharingMapView Kartenoptionen festlegen. Die folgenden Beispiele zeigen, wie Sie eine Karte mit Kartenoptionen gestalten. Weitere Informationen zu den Kartenoptionen, die Sie festlegen können, finden Sie in der mapOptions-Referenz zur Google Maps JavaScript API.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Informationen auf der Karte anzeigen

Zusätzliche Informationen zu einer Fahrzeug- oder Ortsmarkierung mit einem InfoWindow anzeigen Weitere Informationen finden Sie unter InfoWindow.

Im folgenden Beispiel wird ein InfoWindow erstellt und an eine Fahrzeugmarkierung angehängt:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Automatische Anpassung deaktivieren

Sie können verhindern, dass die Karte den Darstellungsbereich automatisch an das Fahrzeug und die voraussichtliche Route anpasst, indem Sie die automatische Anpassung deaktivieren. Das folgende Beispiel zeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht für die gemeinsame Nutzung von Routen konfigurieren.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Nächste Schritte

Markierungen anpassen