So fügen Sie die Standortsuche einfach zu einer Verzeichnis-Website in WordPress hinzu

Es gibt viele verschiedene Möglichkeiten, Ihre Verzeichnis-Website zu verbessern, und eine davon ist die Aktivierung der standortbasierten Suche. Wenn Sie ein Verzeichnis oder eine Kleinanzeigen-Website ähnlich wie Yelp, TripAdvisor, Craigslist oder eine andere ähnliche Website betreiben, die eine standortbasierte Suche erfordert, können Sie dies ganz einfach tun, indem Sie sie in Google Maps integrieren. Für einige Benutzer ist dies eine wesentliche Funktion, da sie nach Produkten, Dienstleistungen oder Orten in ihrer Umgebung suchen können. Außerdem hat die Google Maps-Plattform ein kostenloses monatliches Limit, das ausreichen sollte, wenn Ihre Website mäßigen Traffic erhält.

In diesem Schritt-für-Schritt-Tutorial erklären wir, wie Sie die Standortsuche zu Ihrer Verzeichnis-Website hinzufügen. Wir verwenden HivePress, ein kostenloses WordPress-Plugin, mit dem Sie im Handumdrehen eine Verzeichnis-Website erstellen können. Außerdem wird ListingHive, ein kostenloses WordPress-Verzeichnisthema, zusammen mit der HivePress Geolocation-Erweiterung für die Integration mit Google Maps verwendet.

Wenn Sie jedoch bereits eine Verzeichnis-Website mit einem anderen Plugin oder Design erstellt haben, können Sie die ersten Schritte überspringen und zu „How to Fix „Oops! Etwas ist schief gelaufen. Diese Seite hat Google Maps nicht richtig geladen“ ” Abschnitt zur Behebung der häufigsten Fehler.

Kommen wir also zum ersten Schritt!

HivePress installieren

Zunächst müssen Sie HivePress installieren. Sie können es wie jedes andere kostenlose Plugin in WordPress installieren. Navigieren Sie einfach zum Abschnitt Plugins > Neu hinzufügen und finden Sie es mit der Suchleiste, installieren Sie es und aktivieren Sie es schließlich, indem Sie auf die Schaltfläche „Aktivieren“ klicken. Sobald Sie mit der Installation fertig sind, können Sie mit dem nächsten Schritt fortfahren – der Installation von Erweiterungen.

Wenn Sie Schwierigkeiten haben, können Sie auch dem folgenden Screencast folgen, um HivePress direkt vom WordPress-Dashboard aus zu installieren.

Erweiterungen installieren

Der nächste Schritt besteht darin, die Geolocation-Erweiterung zu installieren, damit Benutzer Einträge nach Standort durchsuchen können. Um es zu installieren, bewegen Sie einfach den Mauszeiger über den HivePress-Bereich und klicken Sie auf den Link „Erweiterungen“. Suchen Sie die Geolocation-Erweiterung in der Liste, klicken Sie auf die Schaltfläche „Installieren“ und aktivieren Sie schließlich die Erweiterung.

Außerdem zeigt der folgende Screencast den allgemeinen Prozess der Installation von HivePress-Erweiterungen, sodass Sie ihm Schritt für Schritt folgen können.

Erstellen eines neuen Projekts

Sobald Sie mit der Plugin-Installation und der Geolocation-Erweiterung fertig sind, ist es an der Zeit, ein Projekt auf der Google Cloud Platform zu erstellen. Vorausgesetzt, Sie haben bereits ein Google-Konto, sollten Sie problemlos auf dieses Dashboard zugreifen können. Wenn Sie jedoch keines haben, müssen Sie sich unbedingt für ein Google-Konto anmelden.

Jetzt müssen Sie ein Projekt erstellen, indem Sie auf die Schaltfläche „Projekt erstellen“ klicken, es benennen und schließlich auf die Schaltfläche „Erstellen“ klicken.

Abrechnung einrichten

Wenn Sie jetzt kein Rechnungskonto bei Google haben, müssen Sie ein neues erstellen, um die Projektabrechnung zu aktivieren. Aber keine Sorge, Sie müssen jetzt nichts bezahlen, es ist nur eine der Voraussetzungen für die Nutzung der Google Maps API. Folgen Sie einfach dem Link und füllen Sie alle Formularfelder aus, einschließlich der Angaben zur Zahlungsmethode.

Sie erhalten jeden Monat ein kostenloses Guthaben von 200 US-Dollar, das in den meisten Fällen mehr als ausreicht, um die Kosten für die Nutzung von Google-Diensten auf Ihrer Website zu decken. Außerdem ist es möglich, Limits und Benachrichtigungen einzurichten, damit Sie das kostenlose Guthaben nie überschreiten. Sie können die Preise überprüfen, um eine bessere Vorstellung davon zu bekommen, wie es funktioniert, und um sicherzustellen, dass Sie Karten kostenlos nutzen können.

Nachdem Sie Ihre Zahlungsinformationen hinzugefügt haben, wird ein Popup-Fenster mit API-Typen angezeigt, die Sie aktivieren möchten. Wählen Sie Karten und Orte wie im Screenshot unten aus und klicken Sie auf die Schaltfläche „Aktivieren“. Wenn kein Pop-up-Fenster angezeigt wird, können Sie diese APIs auch über die Seite Google APIs Library aktivieren.

Erstellen eines API-Schlüssels

Der nächste Schritt besteht darin, einen API-Schlüssel für Ihre Website zu erstellen. Navigieren Sie dazu zur Seite Anmeldeinformationen und wählen Sie Ihr Projekt aus.

Auf der Seite Anmeldeinformationen sehen Sie den bereits generierten API-Schlüssel. Wenn Sie Ihr Rechnungskonto gerade erst erstellt haben, wird möglicherweise automatisch ein Schlüssel generiert. In diesem Fall können Sie zum Bearbeiten einfach darauf klicken. Wenn auf der Seite jedoch kein API-Schlüssel vorhanden ist, können Sie im Abschnitt Anmeldedaten erstellen > API-Schlüssel einen neuen erstellen .

Als Nächstes müssen Sie Ihren API-Schlüssel einrichten, indem Sie die Anwendungsbeschränkungen festlegen. Es ist wichtig, denn wenn Sie den Schlüssel einfach einbetten, wird er im Klartext im Quellcode Ihrer Website angezeigt. Aus diesem Grund müssen Sie dies einschränken, damit andere Personen Ihren API-Schlüssel nicht für ihre Projekte verwenden können. Fügen Sie dazu einfach den HTTP-Referrer hinzu, um nur die API-Anfragen von Ihrer Website zuzulassen. Legen Sie einfach Ihre Website-Adresse fest, aber fügen Sie am Ende auch den Teil „/*“ hinzu, um API-Anfragen von allen Unterseiten der Website zuzulassen, sodass Google Maps auf allen Seiten Ihrer Website funktioniert.

Jetzt müssen Sie im nächsten Feld API-Einschränkungen festlegen. Klicken Sie auf Schlüssel einschränken und wählen Sie Maps JavaScript API, Places API, Geocoding API aus dem Dropdown-Menü aus. Wenn einige der genannten APIs nicht aufgeführt sind, müssen Sie sie zuerst auf der Seite Maps API Library aktivieren. Sobald alle drei Google-APIs aktiviert und im Dropdown-Menü ausgewählt sind, klicken Sie auf die Schaltfläche „Speichern“.

Aktivieren der Google Maps-Integration

Das ist es! Sie haben gerade einen API-Schlüssel erstellt, und der letzte Schliff besteht darin, Google Maps auf Ihrer Website zu aktivieren. Kopieren Sie zunächst den API Key auf der Seite APIs & Services > Credentials . Wenn Sie jetzt das HivePress-Plugin verwenden, navigieren Sie zu Ihrem WordPress-Dashboard und gehen Sie zum Abschnitt HivePress > Einstellungen > Integrationen > Google Maps . Fügen Sie dann einfach Ihren API-Schlüssel in das entsprechende Feld ein und klicken Sie auf die Schaltfläche „Änderungen speichern“, um die Standortsuche zu Ihrer Website hinzuzufügen.

Herzlichen Glückwunsch! Von diesem Moment an ist Ihre Website in Google Maps integriert, und Sie können jetzt Standorte zu bestehenden Einträgen im Abschnitt "Einträge" hinzufügen. Außerdem müssen Benutzer den Speicherort für die neu hinzugefügten Einträge festlegen. Darüber hinaus gibt es auf Ihrer Website ein Standortsuchfeld und eine Google-Karte, sodass Sie es ausprobieren und einige Einträge anhand ihres Standorts durchsuchen können.

Fehlerbehebung

Wenn es Probleme mit dem von Ihnen erstellten API-Schlüssel gibt, zeigt die Karte möglicherweise die Meldung „Ups! Etwas ist schief gelaufen. Diese Seite hat Google Maps nicht korrekt geladen“ -Fehler. Dies ist ein recht häufiger Fehler, da das Einrichten eines API-Schlüssels kein sehr benutzerfreundlicher Prozess ist und Benutzer häufig einige der Einrichtungsschritte überspringen. Sie können es jedoch im Handumdrehen beheben, wenn Sie die Ursachen des Problems kennen.

Um den Grund für diesen Fehler herauszufinden, müssen Sie die JavaScript-Konsole öffnen. Sie können es mit wenigen Tastendrücken öffnen, die sich je nach Browser unterscheiden. Überprüfen Sie die Antwort auf StackOverflow, die erklärt, wie Sie die JavaScript-Konsole öffnen. Wenn Sie den Chrome-Browser verwenden, können Sie ihn einfach mit CTRL+Shift+I öffnen. Sobald Sie es öffnen, sollten Sie eine Fehlermeldung wie diese sehen.

Es ist wichtig, genau zu wissen, was den Fehler verursacht, damit Sie ihn beheben können. Es kann mehrere verschiedene Fehler geben, aber wir zeigen, wie man die häufigsten löst:

• MissingKeyMapError;
• InvalidKeyMapError;
• ApiNotActivatedMapError;
• RefererNotAllowedMapError.

Wenn Sie jedoch einen Fehler haben, der oben nicht aufgeführt ist, lesen Sie die Dokumentation zu Google Maps-API-Fehlermeldungen, um herauszufinden, was falsch ist und wie Sie ihn beheben können.

Fehlender Schlüsselzuordnungsfehler

Dieser Fehler bedeutet, dass überhaupt kein API-Schlüssel vorhanden ist. Sie müssen also einen erstellen, wenn Sie Google Maps auf Ihrer Website aktivieren möchten. Wenn Sie diesen Fehler erhalten, empfehlen wir Ihnen, dieses Tutorial ab dem ersten Schritt zu befolgen, um einen API-Schlüssel zu erstellen und Karten korrekt einzurichten.

Ungültiger Schlüsselzuordnungsfehler

Dieser Fehler tritt auf, wenn Sie den falschen API-Schlüssel verwenden. Höchstwahrscheinlich haben Sie es erstellt, aber nicht korrekt zu Ihrer Website hinzugefügt. Um diesen Fehler zu beheben, gehen Sie zur Seite „Anmeldeinformationen“ und kopieren Sie den API-Schlüssel.

Wenn Sie das HivePress-Plugin und seine Geolocation-Erweiterung verwenden, gehen Sie zum Abschnitt WordPress Dashboard > HivePress > Einstellungen > Integrationen > Google Maps , fügen Sie Ihren API-Schlüssel in das entsprechende Feld ein und klicken Sie auf die Schaltfläche „Änderungen speichern“.

ApiNotActivatedMapError

Wenn Sie diese Art von Fehler erhalten, bedeutet dies, dass Sie die erforderlichen APIs nicht aktiviert haben. Es gibt viele verschiedene APIs in der Google Maps-API-Bibliothek, daher müssen Sie zur Bibliothek gehen und diejenigen aktivieren, die für Ihr Projekt erforderlich sind. Denken Sie nach der Aktivierung daran, sie auch zum Abschnitt API-Einschränkungen in Ihren API-Schlüsseleinstellungen im Abschnitt Anmeldedaten hinzuzufügen.

Wenn Sie beispielsweise das HivePress-Plug-in mit seiner Geolocation-Erweiterung verwenden und Ihrer Verzeichnis-Website die Standortsuche hinzufügen möchten, müssen Sie den Zugriff auf die folgenden Google-APIs aktivieren und zulassen: Maps JavaScript API, Places API, Geocoding API . Sie können sich den Screenshot mit den erforderlichen APIs ansehen.

RefererNotAllowedMapError

Dieser Fehler tritt auf, wenn die API-Referrer-Einschränkungen nicht richtig eingestellt sind. Wenn beispielsweise Karten auf einer Seite Ihrer Website funktionieren und auf anderen nicht, dann hatten Sie höchstwahrscheinlich das gleiche Problem.

Die gute Nachricht ist, dass Sie einen API-Schlüssel korrekt eingerichtet und eingegeben haben und nur ein winziges Detail beheben müssen. Gehen Sie zur Seite Anmeldeinformationen und klicken Sie auf Ihren API-Schlüssel, um ihn zu bearbeiten. Wählen Sie im Abschnitt Anwendungseinschränkungen „HTTP-Referrer (Websites)“ aus. Füllen Sie dann die Website-Einschränkungen wie unten gezeigt aus, aber ersetzen Sie „Beispiel“ durch Ihren Domainnamen und klicken Sie auf die Schaltfläche „Speichern“. Es kann bis zu 5 Minuten dauern, bis die Einstellungen wirksam werden.

Es ist wichtig, den Teil „/*“ am Ende hinzuzufügen, um API-Anfragen von allen Unterseiten der Website zuzulassen, damit Google Maps auf allen Seiten Ihrer Website funktioniert.

Funktioniert immer noch nicht

• Wenn Sie etwas an Ihren API-Schlüsselbeschränkungen ändern – warten Sie bis zu 5 Minuten, bis die Einstellungen wirksam werden;
• Wenn es immer noch einen Fehler gibt – überprüfen Sie die JavaScript-Konsole erneut auf weitere Details. Es könnte ein Fehler auftreten, nachdem Sie den ersten gelöst haben;
• Sie können auch versuchen, den Browser-Cache zu leeren.

Fazit

Das ist es! Sie sagen, wo ein Wille ist, ist auch ein Weg. Sie haben Ihrer Verzeichnis-Website gerade eine Standortsuchfunktion hinzugefügt, und jetzt können Ihre Benutzer Einträge nach Standort durchsuchen. Es ist eine wirklich wichtige Funktion für die meisten Verzeichnisse. Obwohl es wie ein etwas komplizierter Prozess aussehen mag, Google Maps hinzuzufügen, ist es sein Salz wert. Sobald Sie Ihrer Website eine Standortsuche hinzugefügt haben, wirkt sich dies positiv auf die Benutzererfahrung aus. UX ist für jede Website sehr wichtig, da es einer der Eckpfeiler für guten Traffic ist.

Wie Sie sehen, können Sie Google Maps ohne Programmierkenntnisse in Ihre Website integrieren. Wenn Sie sich noch nicht entschieden haben, welches Plugin Sie zum Erstellen Ihrer Verzeichnis-Website verwenden möchten, sollten Sie HivePress in Betracht ziehen. Es ermöglicht Ihnen, Verzeichnis- und Auflistungs-Websites jeder Art zu erstellen. Außerdem enthält es bereits eine kostenlose Erweiterung, die eine standortbasierte Suche und mehrere weitere kostenlose Funktionen ermöglicht, die Sie möglicherweise nützlich finden.

Schauen Sie sich außerdem unsere Artikel an:

• Die beliebtesten kostenlosen WordPress-Verzeichnis-Plugins
• Top-WordPress-Verzeichnisthemen
• Fehler, die beim Erstellen einer WordPress-Verzeichnisseite vermieden werden sollten