---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)
- [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)
- [Standortsuche und Filialseiten einrichten](https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten)
# Standortsuche und Filialseiten einrichten
Der Location Finder zeigt Standorte mit Suche, Filtern, Liste und Google-Maps-Karte, die Location Detail stellt einen einzelnen Standort mit Öffnungszeiten und Kontaktwegen dar. Voraussetzung sind eine App mit Standortdaten, ein Google-Maps-API-Schlüssel und eine Map ID je Section.
## Bevor du startest
- Tarif
- Laioutr-UI-Lizenz für das Projekt (Plattform-Variante)
- Rolle
- Editor oder Admin im Projekt; Entwicklung für den API-Schlüssel
- Dauer
- 8 Min.
### Voraussetzungen
- App mit Standortdaten installiert und verbunden
- Google-Maps-API-Schlüssel in der Projektkonfiguration
- Map ID aus der Google Cloud Console
Zuletzt geprüft am 15. Oktober 2026
Die Standortsuche hilft Kundinnen und Kunden, die nächste Filiale, den nächsten Händler oder einen Abholpunkt zu finden. Laioutr UI liefert dafür zwei Sections, die Standortdaten aus einer angebundenen App anzeigen.
### Location Finder
Der **Location Finder** kombiniert Suchfeld, Filter, eine Liste der Standorte und eine Google-Maps-Karte. Gesucht wird nach Name und Adresse. Auf Desktop stehen Liste und Karte nebeneinander, die Auswahl eines Standorts zentriert die Karte. Mobil wechseln zwei Reiter zwischen Liste und Karte, der gewählte Standort erscheint als Karte am unteren Rand. Jeder Eintrag bietet Navigation, Anruf und einen Link zur Detailseite.
### Location Detail
Die **Location Detail** zeigt einen Standort mit Karte oben, Name, Öffnungsstatus, Merkmalen sowie Schaltflächen für Navigation, Anruf und E-Mail. Darunter stehen Adresse, Öffnungszeiten als Wochenplan und weitere Angaben wie Zahlungsarten.
Für die Karte braucht das Projekt einen Google-Maps-API-Schlüssel und je Section eine Map ID.
## Schritt für Schritt
1. 1 ### Schritt 1: Standortdaten anbinden
Im Cockpit unter Apps prüfen, ob eine App installiert und verbunden ist, die Standorte mit Adresse, Koordinaten und Öffnungszeiten liefert.
2. 2 ### Schritt 2: API-Schlüssel hinterlegen lassen
Die Entwicklung trägt den Google-Maps-API-Schlüssel in der Projektkonfiguration ein. Den Schlüssel in der Google Cloud Console auf die eigenen Domains beschränken, weil er im Browser sichtbar ist.
3. 3 ### Schritt 3: Location Finder einfügen
In Studio die Seite für die Filialsuche öffnen und die Section **Location Finder** einfügen. Im Feld **Google Maps Map ID** die Map ID aus der Google Cloud Console eintragen.
4. 4 ### Schritt 4: Darstellung wählen
Festlegen, ob die Suche die volle Breite nutzt oder als begrenzter Kasten mittig steht. Eine Überschrift ergänzen, die das Angebot benennt, etwa Filialen oder Händler.
5. 5 ### Schritt 5: Detailseite gestalten
Die Seite für einzelne Standorte öffnen, die Section **Location Detail** einfügen und auch hier die Map ID eintragen. Darunter bei Bedarf weitere Sections ergänzen, etwa Aktionen der Filiale.
6. 6 ### Schritt 6: Speichern und veröffentlichen
Mit **Save** den Entwurf sichern und mit **Publish** veröffentlichen, wenn alles passt.
## Ergebnis prüfen
In der Vorschau nach einer Stadt suchen, einen Standort in der Liste wählen und prüfen, ob die Karte dorthin springt. In der Mobilansicht zwischen Liste und Karte wechseln, dann die Detailseite öffnen und Öffnungszeiten sowie die Schaltflächen für Navigation und Anruf testen.
## Häufige Fragen
Warum bleibt die Karte leer?
Meist fehlt der Google-Maps-API-Schlüssel in der Projektkonfiguration oder die Map ID in der Section. Suche, Liste und Filter funktionieren auch ohne Schlüssel weiter, nur die Karte bleibt leer. Die Browser-Konsole nennt die fehlende Angabe.
Woher kommen Öffnungszeiten und Öffnungsstatus?
Aus den Standortdaten der angebundenen App. Die Öffnungszeiten enthalten einen Wochenplan mit Zeitzone und Ausnahmen für einzelne Tage. Daraus zeigt die Storefront, ob ein Standort gerade geöffnet ist, und fasst Tage mit gleichen Zeiten in einer Zeile zusammen.
Welche Filter stehen zur Verfügung?
Die Filter ergeben sich aus den Standortdaten, etwa Services oder Merkmale einer Filiale. Angezeigt werden die Filter im selben Filterfenster wie auf Produktlisten.
## Passend dazu
- [Apps finden, installieren und konfigurieren](https://academy.laioutr.com/artikel/apps-finden-installieren-und-konfigurieren)6 Min.
Apps stehen im Cockpit unter Apps als Katalog bereit, werden je Umgebung installiert und unter Configuration eingerichtet. Die Storefront nutzt sie ab dem nächsten Deployment.
- [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)10 Min.
Header Shop, Mega Menu oder Menu Side by Side, Top Bar und Footer bilden die Navigation einer Storefront und werden meist als globale Sections gepflegt. In Studio werden Menüpunkte, Suche, Service-Links, Kontaktangaben und Footer-Spalten einmal eingerichtet und je Sprache angepasst.
- [Seitentyp-Rezepte: Home, Produktliste, Produktdetail, Content](https://academy.laioutr.com/artikel/seitentyp-rezepte-home-produktliste-produktdetail-content)6 Min.
Für die wichtigsten Seitentypen gibt es bewährte Rezepte: welcher Pfad gilt, welche Daten die Seite lädt und welche Sections sie typischerweise enthält. Die Übersicht hilft, eine Storefront vollständig und konsistent aufzubauen.
## [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)
In diesem Leitfaden suchen
1. [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.
2. [Bild und Video, Popups, Hinweise und Navigation in der Seite](https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation)7 Min.
3. [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)10 Min.
4. [Blog mit Übersicht und Artikelseiten aufbauen](https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen)8 Min.
5. [Standortsuche und Filialseiten einrichten](https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten)8 Min.
6. [Preisseite mit Plan Cards und Vergleichstabelle bauen](https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle)9 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront-Funktionen",
"item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
"position": 2
},
{
"@type": "ListItem",
"name": "Inhalt und Navigation",
"item": "https://academy.laioutr.com/leitfaeden/inhalt-und-navigation",
"position": 3
},
{
"@type": "ListItem",
"name": "Standortsuche und Filialseiten einrichten",
"item": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Warum bleibt die Karte leer?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Meist fehlt der Google-Maps-API-Schlüssel in der Projektkonfiguration oder die Map ID in der Section. Suche, Liste und Filter funktionieren auch ohne Schlüssel weiter, nur die Karte bleibt leer. Die Browser-Konsole nennt die fehlende Angabe.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Woher kommen Öffnungszeiten und Öffnungsstatus?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Aus den Standortdaten der angebundenen App. Die Öffnungszeiten enthalten einen Wochenplan mit Zeitzone und Ausnahmen für einzelne Tage. Daraus zeigt die Storefront, ob ein Standort gerade geöffnet ist, und fasst Tage mit gleichen Zeiten in einer Zeile zusammen.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Welche Filter stehen zur Verfügung?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Die Filter ergeben sich aus den Standortdaten, etwa Services oder Merkmale einer Filiale. Angezeigt werden die Filter im selben Filterfenster wie auf Produktlisten.
"
}
}
]
}
```