Implementierungsleitfaden für die Produktsuche

Übersicht

Nutzer, die Ihre Produkte online sehen, wünschen sich einen einfachen, optimierten Bestellvorgang. Der Leitfaden zur Implementierung der Produktsuche und die Anpassungstipps, die wir hier zur Verfügung stellen, bilden zusammen unsere Empfehlung für die optimale Kombination aus Google Maps Platform APIs und für die bestmögliche Nutzerfreundlichkeit der Produktsuche.

Wenn Sie sich an diesem Leitfaden orientieren, sehen potenzielle Kunden genau die Informationen, die sie benötigen, um Ihre Produkte zu finden. Außerdem erhalten sie eine Wegbeschreibung zu der Filiale, die den gewünschten Artikel vorrätig hat, unabhängig davon, ob sie mit dem Auto, mit dem Fahrrad, zu Fuß oder mit öffentlichen Verkehrsmitteln unterwegs sind.

APIs aktivieren

Wenn Sie die Produktsuche implementieren möchten, müssen Sie die folgenden APIs in der Google Cloud Console aktivieren. Über die Hyperlinks unten werden Sie zur Google Cloud Console weitergeleitet. Dort können Sie die einzelnen APIs für das ausgewählte Projekt aktivieren:

• Maps JavaScript API
• Places API
• Geocoding API
• Distance Matrix API
• Directions API

Weitere Informationen zur Einrichtung finden Sie unter Erste Schritte mit der Google Maps Platform.

Abschnitte des Implementierungsleitfadens

Nachfolgend finden Sie einen Überblick über die Implementierungsschritte und Anpassungsmöglichkeiten, die in diesem Leitfaden erläutert werden.

• check_circle_filled Das Häkchensymbol kennzeichnet einen wichtigen Implementierungsschritt.
• stars Das Sternsymbol weist auf eine optionale, aber empfohlene Anpassung hin, mit der die Lösung optimiert werden kann.

check_circle_filled	Filialstandorte mit Orten in der Google Maps Platform verknüpfen	Durch die Verknüpfung lassen sich Filialstandorte mit Orten in der Google Maps Platform abgleichen.
check_circle_filled	Standort des Nutzers bestimmen	Mit der automatischen Vervollständigung sorgen Sie auf allen Plattformen während der Adresseingabe für minimalen Tippaufwand und weniger Fehler.
check_circle_filled	Filialstandorte in der Nähe finden	Sie können Entfernung und Reisedauer für mehrere Start- und Zielpunkte berechnen lassen und optional unterschiedliche Mobilitätsformen angeben, etwa zu Fuß, mit dem Auto oder mit dem Fahrrad.
check_circle_filled	Informationen zu Filialen anzeigen	Sie können detaillierte Informationen zu Ihren Filialen angeben, damit diese von Nutzern leichter gefunden werden.
stars	Wegbeschreibungen verfügbar machen	Stellen Sie Wegbeschreibungsdaten vom Start bis zum Ziel für unterschiedliche Mobilitätsformen zur Verfügung, etwa zu Fuß, mit dem Auto, mit dem Fahrrad und mit öffentlichen Verkehrsmitteln.
stars	Wegbeschreibungen an Smartphones senden	Sie können Wegbeschreibungen nicht nur auf Ihrer Webseite verfügbar machen, sondern auch an die Smartphones von Nutzern senden, sodass diese Google Maps unterwegs für die Navigation verwenden können.
stars	Standorte auf einer interaktiven Karte darstellen	Erstellen Sie benutzerdefinierte Kartenmarkierungen, um Ihre Standorte auffällig darzustellen, und wählen Sie einen Kartenstil, der zum Farbschema Ihrer Marke passt. Blenden Sie spezifische POIs auf der Karte ein oder aus, damit sich die Nutzer besser orientieren können. Sie können auch die gewünschte POI-Dichte angeben, um zu verhindern, dass die Karte überladen wird.
stars	Benutzerdefinierte Standortdaten mit „Place Details“-Anfragen kombinieren	Wenn Sie eigene, benutzerdefinierte Standortdetails mit „Place Details“-Anfragen kombinieren, stehen den Nutzern umfangreiche Daten für die Entscheidungsfindung zur Verfügung.

Orts-IDs abrufen

Im Beispiel verwendet: Places API

Auch verfügbar: JavaScript

Angenommen, Sie haben eine Datenbank, die grundlegende Informationen zu Ihren Filialen enthält, z. B. Namen, Adressen und Telefonnummern. Diese möchten Sie mit Orten in der Google Maps Platform verknüpfen, sozusagen als Zielorte, an denen Nutzer Ihre Produkte abholen können. Wenn nun Daten zu einem entsprechenden Ort von der Google Maps Platform abgerufen werden sollen, einschließlich geografischer Koordinaten und von Nutzern zur Verfügung gestellter Informationen, müssen Sie nach der Orts-ID suchen, die der jeweiligen Filiale in Ihrer Datenbank entspricht. Dazu können Sie in „Place Search“ der Places API den „Find Place“-Endpunkt aufrufen und nur das Feld place_id anfordern.

Im folgenden Beispiel wird die Orts-ID der Google-Niederlassung in London abgerufen:

    https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a

Sie können diese Orts-ID in Ihrer Datenbank mit den übrigen Daten zur Filiale speichern und verfügen so über eine effiziente Methode, Informationen zur Filiale anzufordern. Nachfolgend finden Sie eine Anleitung dazu, wie Sie die Orts-ID für das Geocoding, für das Abrufen von Ortsdaten mit „Place Details“-Anfragen sowie für das Anfordern einer Wegbeschreibung zum jeweiligen Ort verwenden können.

Geocoding von Standorten

Im Beispiel verwendet: Geocoding API

Auch verfügbar: JavaScript

Wenn in der Datenbank mit Filialen zwar Adressen, aber keine geografischen Koordinaten enthalten sind, können Sie die Geocoding API verwenden, um die entsprechenden Längen- und Breitengrade abzurufen und so zu berechnen, welche Filialen sich in der Nähe des Nutzers befinden. Sie können das Geocoding serverseitig vornehmen und die Längen- und Breitengrade in Ihrer Datenbank speichern. Sie müssen mindestens alle 30 Tage aktualisiert werden.

In diesem Beispiel werden mit der Geocoding API der Längen- und der Breitengrad der Orts-ID abgerufen, die für die Google-Niederlassung in London zurückgegeben wurde:

    https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a

Im Beispiel verwendet: Places Autocomplete Library in der Maps JavaScript API

Auch verfügbar: Android | iOS

Ein wichtiger Schritt in der Produktsuche ist die Ermittlung des Ausgangsorts des Nutzers. Es gibt zwei Optionen, mit denen Nutzer ihren Ausgangsort zur Verfügung stellen können: Entweder sie geben den Startpunkt für die Suche ein oder sie lassen die Standortbestimmung im Webbrowser bzw. die Standortdienste auf Mobilgeräten zu.

Eingaben mit Autocomplete verarbeiten

Nutzer sind inzwischen an Funktionen zur automatischen Vervollständigung bei der Eingabe, wie sie auch in Google Maps verwendet werden, gewöhnt. Diese Funktion lässt sich mit der jeweiligen Places Library der Google Maps Platform in beliebige Apps auf Mobilgeräten und im Web einbinden. Wenn ein Nutzer mit der Adresseingabe beginnt, wird durch die automatische Vervollständigung der Rest ausgefüllt. Hierbei kommen Widgets zum Einsatz. Wenn Sie möchten, können Sie direkt über die jeweilige Places Library Ihre eigene Vervollständigungsfunktion einbinden.

Im folgenden Beispiel fügen Sie Ihrer Website die Place Autocomplete-Bibliothek hinzu, indem Sie den Parameter libraries=places in die URL des Maps JavaScript API-Scripts einfügen.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>

Danach fügen Sie ein Textfeld für die Nutzereingabe auf Ihrer Seite ein:

<input id="autocomplete" placeholder="Enter
  starting address, city, or zip code" type="text"></input>

Zum Schluss initialisieren Sie den Autocomplete-Dienst und verknüpfen ihn mit dem benannten Textfeld: Wenn die „Place Autocomplete“-Vervollständigungen auf Geocodingtypen beschränkt werden, wird das Eingabefeld so konfiguriert, dass Adressen, Stadtteile, Städte und Postleitzahlen zulässig sind. Damit können Nutzer ihren Ausgangspunkt so allgemein oder so genau angeben, wie sie möchten. Sie müssen das Feld geometry anfordern, damit im Ergebnis der Längen- und der Breitengrad enthalten sind. Mit diesen Kartenkoordinaten werden Ihre Standorte zum Ausgangspunkt in Beziehung gesetzt.

// Create the autocomplete object, restricting the search predictions to
// geographical location types.
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete"),
{ types: ["geocode"],
  componentRestrictions: {'country': ['gb']},
  fields: ['place_id', 'geometry', 'formatted_address'] }
);
// When the user selects an address from the drop-down
// zoom to the select location and add a marker.
autocomplete.addListener("place_changed", searchFromOrigin);
}

Im Beispiel wird die Funktion searchFromOrigin() ausgeführt, sobald der Nutzer die Adresse ausgewählt hat. Anhand der Geometrie des abgeglichenen Ergebnisses, also des Standorts des Nutzers, werden die nächstgelegenen Filialen ermittelt (siehe Filialstandorte in der Nähe finden).

Über die Standortbestimmung im Browser

Wenn Sie die HTML5-Browser-Standortbestimmung anfordern und verarbeiten möchten, sehen Sie sich an, wie ein Fenster für Meinen Standort verwenden aktiviert wird.

Im Beispiel verwendet: „Distance Matrix“-Dienst, Maps JavaScript API

Auch verfügbar: Distance Matrix API

Sobald Sie den Standort des Nutzers kennen, können Sie diese Angabe mit Ihren Filialstandorten abgleichen. Wenn Sie hierfür den „Distance Matrix“-Dienst und die Maps JavaScript API einsetzen, können Nutzer anhand der Fahrzeit oder Entfernung nachvollziehen, welcher Standort für sie am besten erreichbar ist.

Standardmäßig werden Standortlisten nach Entfernung sortiert. Häufig wird die Entfernung einfach als direkte Linie von einem Nutzer zu einem Standort berechnet. Das kann aber irreführend sein. Es ist nämlich möglich, dass die direkte Linie z. B. über einen unpassierbaren Fluss oder verkehrsreiche Straßen führt und somit ein anderer Standort besser zu erreichen ist. Das ist wichtig, wenn es mehrere Standorte in einem kleinen Umkreis gibt.

Der „Distance Matrix“-Dienst der Maps JavaScript API nutzt eine Liste der Ausgangs- und Zielorte und gibt anhand der Liste nicht nur die Entfernung, sondern auch die Reisezeit zwischen Ausgangs- und Zielort zurück. Der Ausgangsort entspricht der Position, an der sich der Nutzer gerade befindet bzw. von der er starten möchte. Die Zielorte entsprechen den Filialstandorten. Ausgangsorte und Zielorte können als Koordinatenpaare oder als Adressen angegeben werden. Wenn Sie den Dienst aufrufen, ordnet er die Adressen zu. Sie können beim „Distance Matrix“-Dienst der Maps JavaScript API eine Reihe zusätzlicher Parameter verwenden und so Ergebnisse anzeigen lassen, die auf aktuellen oder zukünftigen Fahrzeiten basieren.

Im folgenden Beispiel wird der „Distance Matrix“-Dienst der Maps JavaScript API aufgerufen. Dabei werden der Ausgangsort des Nutzers und 25 Filialstandorte gleichzeitig angegeben.

function getDistances(place) {
  let distanceMatrixService = new google.maps.DistanceMatrixService();
  const origins = [place];
  return new Promise((resolve, reject) => {
    const callback = (response, status) => {
      if (status === google.maps.DistanceMatrixStatus.OK && response) {
        resolve(response);
      } else {
        reject(status);
      }
    };
    distanceMatrixService.getDistanceMatrix(
      {
        origins,
        destinations: stores.slice(0, 25).map((store) => store.location),
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      },
      callback
    );
  });
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then((response) => {
      for (let i = 0; i < response.rows[0].elements.length; i++) {
        stores[i].address = response.destinationAddresses[i];
        stores[i].travelDistance = response.rows[0].elements[i].distance.value;
        stores[i].travelDistanceText =
          response.rows[0].elements[i].distance.text;
        stores[i].travelDuration = response.rows[0].elements[i].duration.value;
        stores[i].travelDurationText =
          response.rows[0].elements[i].duration.text;
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

Für jeden Standort in der Nähe lässt sich die Verfügbarkeit des Produkts anhand Ihrer Inventardatenbank anzeigen.

Im Beispiel verwendet: Places Library, Maps JavaScript API

Auch verfügbar: Places SDK for Android | Places SDK for iOS | Places API

Mithilfe von umfangreichen, über eine „Place Details“-Anfrage abgerufenen Ortsdetails wie Kontaktdaten, Öffnungszeiten oder Informationen zu vorübergehenden Schließungen können Nutzer ihre bevorzugte Filiale auswählen oder ihre Bestellung abschließen.

Nachdem Sie die Maps JavaScript API zum Abrufen von Ortsdetails über eine „Place Details“-Anfrage aufgerufen haben, können Sie die Antwort filtern und rendern.

Die Orts-ID des jeweiligen Standorts ist Voraussetzung für das Abrufen von Ortsdetails über eine „Place Details“-Anfrage. Informationen zum Ermitteln der Orts-ID eines Standorts finden Sie unter Orts-IDs abrufen.

Die folgende „Place Details“-Anfrage gibt Adresse, Koordinaten, Website, Telefonnummer, Bewertung und Öffnungszeiten der Orts-ID der Google-Niederlassung in London zurück:

var request = {
  placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
  fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};


service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

---

Produktsuche optimieren

Abhängig davon, welche Anforderungen es in Ihrem Unternehmen gibt oder welche Bedürfnisse die Nutzer äußern, sind weitere Optimierungen möglich.

Im Beispiel verwendet: Directions-Dienst, Maps JavaScript API

Auch verfügbar: Webdienst der Directions API (Android und iOS), entweder direkt über die App oder per Remote-Aufruf über einen Proxyserver

Wenn Nutzer Wegbeschreibungen direkt auf Ihrer Website oder in Ihren Apps sehen, müssen sie nicht woanders danach suchen. So werden sie nicht von anderen Seiten abgelenkt oder stoßen auf der Karte gar nicht erst auf andere Anbieter. Wenn Sie ein CO₂-Dataset haben, können Sie sogar den CO₂-Ausstoß der gewählten Mobilitätsform sowie die Auswirkungen der jeweiligen Fahrt auf die Umwelt angeben.

Im „Directions“-Dienst finden Sie außerdem Funktionen, mit denen Sie die Ergebnisse bearbeiten und ganz einfach auf einer Karte darstellen können.

Nachfolgend sehen Sie ein Beispiel für die Darstellung eines Bereichs mit Wegbeschreibungen. Weitere Informationen zu diesem Beispiel finden Sie im Artikel zu Wegbeschreibungen in Textform.

Damit potenzielle Kunden den Weg zu einer Filiale noch einfacher finden, können Sie ihnen per SMS oder E-Mail einen Link mit einer Wegbeschreibung schicken. Wenn sie darauf klicken, wird die Google Maps App auf dem Smartphone gestartet (sofern installiert) oder maps.google.com im Webbrowser des Geräts geladen. In beiden Fällen haben die Nutzer die Möglichkeit, die detaillierte Routenführung, einschließlich Sprachführung, zu aktivieren.

Verwenden Sie Maps-URLs, um eine Wegbeschreibungs-URL wie unten zu erstellen. Hierbei ist der URL-codierte Ortsname als destination-Parameter und die Orts-ID als destination_place_id-Parameter definiert. Erstellung und Verwendung von Maps-URLs sind kostenlos, es muss also kein API-Schlüssel in die URL aufgenommen werden.

https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

Optional kann ein origin-Suchparameter angegeben werden, der dasselbe Adressformat wie das Ziel hat. Wenn er weggelassen wird, beginnt die Wegbeschreibung am aktuellen Standort des Nutzers. Dieser kann von dem Ort abweichen, an dem er Ihre Produktsuche verwendet hat. Bei Maps-URLs gibt es zusätzliche Suchparameteroptionen, etwa travelmode und dir_action=navigate, über die die Wegbeschreibung mit aktivierter Navigationsfunktion aufgerufen werden kann.

Durch diesen anklickbaren Link, einer Erweiterung der Beispiel-URL oben, wird als origin ein Fußballstadion in London festgelegt. Über travelmode=transit wird die Route zum Ziel mit öffentlichen Verkehrsmitteln angegeben.

Zum Senden einer SMS oder E-Mail mit dieser URL empfehlen wir derzeit eine Drittanbieter-App wie Twilio. Wenn Sie mit App Engine arbeiten, können Sie SMS oder E-Mails über Drittunternehmen senden. Weitere Informationen finden Sie unter Nachrichten mit Drittanbieterdiensten senden.

Dynamische Karten verwenden

Im Beispiel verwendet: Maps JavaScript API

Auch verfügbar: Android | iOS

Viele Nutzer legen großen Wert auf eine Standortsuche. Auf einigen Websites gibt es jedoch nicht einmal eine einfache Karte. Die Nutzer müssen also die Website oder die App verlassen und anderswo nach einem Standort in der Nähe suchen. Das wird oft als störend empfunden. Sie können diesen Ablauf optimieren, indem Sie Karten in Ihre Anwendungen einbetten und entsprechend anpassen.

Mit einigen wenigen Codezeilen lässt sich eine dynamische Karte in Ihre Seite einbinden – also eine Karte, auf der die Nutzer navigieren, heran- und herauszoomen sowie Informationen zu unterschiedlichen Standorten und POIs abrufen können.

Als Erstes müssen Sie die Maps JavaScript API in die Seite einbinden. Hierfür verknüpfen Sie das nachfolgende Script auf Ihrer HTML-Seite.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>

Die URL verweist auf die JavaScript-Funktion initMap, die beim Laden der Seite ausgeführt wird. In der URL kann auch die Sprache oder Region Ihrer Karte definiert und so sichergestellt werden, dass sie richtig für das Zielland formatiert ist. Wenn Sie eine Region festlegen, können Sie außerdem dafür sorgen, dass das Verhalten von Anwendungen, die außerhalb der USA verwendet werden, der jeweiligen Region entspricht. Die vollständige Liste der unterstützten Sprachen und Regionen sowie weitere Informationen zur Verwendung des Parameters regionfinden Sie in den Details zur Google Maps Platform-Abdeckung.

Als Nächstes brauchen Sie ein HTML-div-Element, mit dem die Karte auf der Seite positioniert wird. Das ist die Stelle, an der die Karte dann zu sehen ist.

<div id="map"></div>

Anschließend müssen Sie die grundlegende Funktionalität Ihrer Karte definieren. Dazu verwenden Sie die initMap-Scriptfunktion, die in der Script-URL angegeben ist. Im Script, das im Beispiel unten zu sehen ist, können Sie die Anfangsposition, den Kartentyp und die Steuerelemente festlegen, die den Nutzern auf der Karte zur Verfügung stehen sollen. Hinweis: getElementById() verweist auf die oben angegebene, kartenbezogene div-ID.

function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
zoomControl: false
});
}

Bei einer Standortsuche ist in der Regel Folgendes von Interesse: die Anfangsposition, der Mittelpunkt bzw. die Begrenzungen sowie die Zoomstufe, also wie groß der Standort und seine Umgebung auf der Karte zu sehen sein sollen. Die meisten anderen Unterelemente, etwa die Justierung der Steuerelemente, sind optional und davon abhängig, inwieweit eine Interaktion mit der Karte möglich sein soll.

Karte anpassen

Es gibt mehrere Möglichkeiten, Aussehen und Details Ihrer Karte anzupassen. Beispielsweise können Sie…

• eigene, benutzerdefinierte Markierungen erstellen und anstatt der standardmäßigen Stecknadeln für Karten verwenden.
• Farben von Kartenelementen an Ihr Branding anpassen.
• steuern, welche POIs (Sehenswürdigkeiten, Restaurants, Unterkünfte usw.) und in welcher Dichte sie zu sehen sein sollen. So können Sie die Aufmerksamkeit der Nutzer auf Ihre Standorte lenken und gleichzeitig Orientierungspunkte angeben, mit deren Hilfe sie den nächstgelegenen Standort mühelos finden.

Benutzerdefinierte Kartenmarkierungen erstellen

Sie können die Standardfarbe von Markierungen ändern und so z. B. deutlich machen, ob derzeit geöffnet oder geschlossen ist. Außerdem haben Sie die Möglichkeit, Markierungen durch benutzerdefinierte Grafiken zu ersetzen, etwa das Logo Ihres Unternehmens. In Info- oder Pop-up-Fenstern können Sie Ihren Kunden weitere Informationen zur Verfügung stellen und z. B. Öffnungszeiten oder Telefonnummern angeben oder auch Fotos einfügen. Benutzerdefinierte Markierungen können im Vektor- oder Rasterformat erstellt werden und ziehbar oder sogar animiert sein.

Es folgt eine Beispielkarte mit benutzerdefinierten Markierungen. Den Quellcode finden Sie im englischsprachigen Artikel zu benutzerdefinierten Markierungen in der Maps JavaScript API.

Ausführliche Informationen sind in der Markierungsdokumentation für JavaScript (Web), Android und iOS verfügbar.

Cloudbasiertes Gestalten von Karteninhalten

In der Google Maps Platform können Sie Ihrer Karte einen Stil zuweisen, durch den potenzielle Kunden den nächstgelegenen Standort leichter finden und das Augenmerk verstärkt auf Ihr Unternehmen gelenkt wird. So lassen sich beispielsweise die Kartenfarben mit Ihrem Branding abstimmen und die sichtbaren POIs auf der Karte einschränken, damit Nutzer nicht zu sehr vom Wesentlichen abgelenkt werden. Auf der Google Maps Platform stehen außerdem eine ganze Reihe von Kartenvorlagen für den Einstieg zur Verfügung. Einige davon wurden für unterschiedliche Branchen optimiert, wie etwa Reisen, Logistik, Immobilien und Einzelhandel.

Nutzen Sie zum Erstellen oder Ändern von Kartenstilen die Google Cloud Console-Seite Kartenstile in Ihrem Projekt.

Jeder Kartenstil hat eine eigene ID. Nachdem Sie einen Stil in der Cloud Console veröffentlicht haben, verweisen Sie im Code auf diese Karten-ID. So können Sie einen Kartenstil in Echtzeit aktualisieren – ohne Refaktorierung Ihrer App. Die neue Variante wird automatisch in die bestehende App übernommen und auf allen Plattformen verwendet. In den Beispielen unten wird erläutert, wie über die Maps JavaScript API einer Webseite eine Karten-ID hinzugefügt wird.

Wenn Sie eine oder mehrere map_ids in die Script-URL aufnehmen, werden die jeweiligen Stile automatisch über die Maps JavaScript API zur Verfügung gestellt. So ist ein schnelleres Kartenrendering möglich, wenn diese Stile im Code aufgerufen werden.

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>

Mit dem nachfolgenden Code wird eine Karte mit benutzerdefinierten Stilen auf der Webseite angezeigt. (Hier nicht zu sehen ist ein HTML-Element vom Typ <div id="map"></div> für die Positionierung der Karte auf der Seite.)

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});

Weitere Informationen zum cloudbasierten Gestalten von Karteninhalten in JavaScript (Web), Android und iOS

Im letzten Abschnitt (Standorte auf einer interaktiven Karte darstellen) ging es um die Verwendung von „Place Details“-Anfragen, um Nutzern umfangreiche Informationen zu Ihren Standorten wie Öffnungszeiten, Fotos und Rezensionen zur Verfügung zu stellen.

Sie sollten sich einen Überblick über die Kosten unterschiedlicher Datenfelder in „Place Details“-Anfragen verschaffen. Sie sind in die SKUs „Basic Data“, „Contact Data“ und „Atmosphere Data“ unterteilt. Eine Strategie zur Kostenkontrolle ist, die Daten, die Ihnen zu Ihren Standorten bereits zur Verfügung stehen, mit den neuen Informationen (in der Regel Basic oder Contact Data) aus Google Maps zusammenzuführen. Beispiele hierfür sind vorübergehende Schließungen, Öffnungszeiten an Feiertagen sowie Nutzerbewertungen, Fotos und Rezensionen. Wenn Sie die Kontaktdaten für Ihre Filiale bereits haben, müssen Sie diese Felder nicht über „Place Details“-Anfragen abrufen. Sie können dann Ihre Anfrage so einschränken, dass nur die Felder für Basic oder Atmosphere Data abgerufen werden – je nachdem, was angezeigt werden soll.

Möglicherweise haben Sie eigene Standortdaten, die Sie als Ergänzung zu Ortsdaten, die über eine „Place Details“-Anfrage abgerufen werden, oder stattdessen nutzen können. Im Codelab für die erweiterte Standortsuche finden Sie ein Beispiel dafür, wie Sie GeoJSON mit einer Datenbank verwenden können, um Ihre eigenen Standortdetails zu speichern und abzurufen.