Möchten Sie den Google Maps Store Locator zu WordPress hinzufügen? Ein Filialfinder ist eine Karte, die auf den Standort Ihres Unternehmens verweist.
Ermöglicht Benutzern das Auffinden auf der Karte, das Finden von Wegbeschreibungen oder das Teilen des Standorts mit Freunden. Durch Hinzufügen eines Filialfinder zu Ihrer Unternehmenswebsite oder sogar zu einem Online-Shop können Sie sofort das Vertrauen der Benutzer gewinnen.
In diesem Artikel zeigen wir Ihnen, wie Sie den Google Maps Store Locator ganz einfach zu WordPress hinzufügen können.
Google Maps hat eine kostenpflichtige API eingeführt, um Karten auf Websites anzuzeigen. Sie bieten weiterhin eine eingeschränkte kostenlose Option zum Einbetten von Google Maps in kleine Websites.
Die meisten Google Maps-Plugins für WordPress verwenden die Google-API zum Abrufen und Anzeigen von Karten. Wenn Sie ein Google Maps-Plugin verwenden möchten, müssen Sie sich bei der Google API-Plattform registrieren und die Abrechnungsoption aktivieren.
Es handelt sich um einen Pay-as-you-go-Service. Dies bedeutet, dass Ihnen die Anzahl der API-Aufrufe von Ihrer Website berechnet wird.
Wir zeigen Ihnen die kostenlosen und kostenpflichtigen Methoden mit ihren Vor- und Nachteilen. Anschließend können Sie die Methode auswählen, die Ihren Anforderungen am besten entspricht.
Methode 1. Fügen Sie Ihrer Website kostenlos Google Maps hinzu
Diese Methode ist einfacher und kostenlos. Der Nachteil ist, dass Sie nicht mehrere Geschäfte auf einer Karte anzeigen können.
Es wird Nutzern empfohlen, die nur einen einzigen Google Maps-Speicherort auf ihrer Website hinzufügen möchten.
Zunächst müssen Sie die Google Maps-Website auf Ihrem Computer besuchen. Geben Sie dann Ihre Geschäftsadresse in das Suchfeld ein und Google Maps zeigt sie auf der Karte mit einer Markierung auf der Karte an.
Stellen Sie sicher, dass der Marker an der richtigen Stelle platziert ist. Sie können eine Zoomstufe auswählen, indem Sie auf die Zoom-Schaltfläche klicken. Wenn Sie mit der Zoomstufe zufrieden sind, sollten Sie auf die Schaltfläche “Teilen” in der linken Spalte klicken.
Ein Popup-Fenster wird angezeigt, in dem Sie zur Registerkarte “Karte einbetten” wechseln sollten. Sie sehen nun Ihren gesuchten Ort auf der Karte mit einem HTML-Code.
Klicken Sie auf den Link HTML kopieren, um den Einbettungscode abzurufen.
Gehen Sie jetzt zum Admin-Bereich Ihrer WordPress-Website. Bearbeiten Sie im Administrationsbereich den Beitrag oder die Seite, auf der Sie die Standortkarte des Geschäfts anzeigen möchten.
In der Regel fügen Benutzer ihrer Kontaktformularseite eine Standortkarte mit ihrer Telefonnummer und den Öffnungszeiten hinzu.
Auf dem nachfolgenden Bearbeitungsbildschirm müssen Sie einen benutzerdefinierten HTML-Block hinzufügen.
Im Textbereich des benutzerdefinierten HTML-Blocks müssen Sie den Code einfügen, den Sie aus Google Maps kopiert haben.
Sie können jetzt zur Registerkarte “Vorschau” wechseln, um Google Maps in Ihre Seite einzubetten. Es zeigt Ihren markierten Geschäftsstandort auf der Karte mit Links zu Adressen oder zum Speichern des Standorts.
Methode 2. Fügen Sie den Google Maps Store Locator mithilfe eines WordPress-Plugins hinzu
Diese Methode wird Benutzern empfohlen, die mehrere Geschäftsstandorte auf einer Google-Karte anzeigen möchten.
Als erstes müssen Sie das WP Store Locator-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Es ist ein kostenloses Google Maps-Plugin, mit dem Sie eine benutzerdefinierte Karte mit mehreren Geschäftsstandorten und benutzerdefinierten Feldern erstellen können.
Der Nachteil dieser Methode ist, dass Sie einen API-Schlüssel hinzufügen müssen. Sie müssen Ihre Zahlungsinformationen angeben, um den API-Schlüssel verwenden zu können. Preise und andere Informationen finden Sie auf der Website der Google Maps-Plattform.
Fertig, lass uns anfangen.
Schritt 1. Generieren Sie Google Maps API-Schlüssel
Um das WP Store Locator-Plugin verwenden zu können, müssen Sie zwei API-Schlüssel generieren. Der erste wird als Browser-API-Schlüssel und der zweite als Serverschlüssel bezeichnet.
Beginnen wir zuerst mit dem Browserschlüssel. Klicken Sie in der Google Developer Console auf diesen Link, um zur Google API-Website mit allen erforderlichen aktivierten APIs zu gelangen.
Sie müssen ein neues Projekt erstellen und ihm einen Namen geben, damit Sie es leichter identifizieren können. Danach müssen Sie einige Momente warten, während die Konsole das Projekt für Sie erstellt.
Sie werden dann zur API-Schlüsselkonfigurationsseite weitergeleitet. Sie müssen einen Titel für Ihren API-Schlüssel angeben, damit Sie ihn leicht als Browser-API-Schlüssel für Ihr Google Maps-Projekt identifizieren können.
Als Nächstes müssen Sie unter “HTTP-Referenzen” “Anwendungsbeschränkungen” festlegen. Darunter müssen Sie das Feld “Anfragen annehmen von” für Ihren Domainnamen im folgenden Format festlegen.
https://example.com/*
https: //*.example.com/* (wenn Sie eine Subdomain verwenden)
Klicken Sie abschließend auf die Schaltfläche “Erstellen”. Die Konsole speichert jetzt Ihre Einstellungen und zeigt Ihnen den Browserschlüssel. Sie müssen diesen Schlüssel kopieren und in einen Texteditor einfügen, den Sie später benötigen.
Als Nächstes müssen Sie den Server-API-Schlüssel erstellen. Klicken Sie in der Google Developer Console auf diesen Link, um mit aktivierten ausgewählten APIs direkt zur Konsole zu gelangen.
Sie sehen die Projekterstellungsseite erneut. Da Sie jedoch bereits ein Projekt erstellt haben, können Sie auf das Dropdown-Menü klicken und Ihr Projekt auswählen.
Anschließend werden Sie zur API-Konfigurationsseite weitergeleitet. Geben Sie einen Namen für diesen API-Schlüssel an, damit Sie ihn als Serverschlüssel erkennen können.
Im Abschnitt “Anwendungsbeschränkungen” müssen Sie IP-Adressen auswählen. Grundsätzlich weisen wir Google an, nur Serveranforderungen zu akzeptieren, die von bestimmten IP-Adressen stammen.
Jetzt müssen Sie Ihren WordPress-Hosting-Anbieter bitten, Ihnen den von Ihrem Hosting-Konto verwendeten IP-Bereich mitzuteilen. Es würde im folgenden Format sein:
172.16.0.0/12
Danach müssen Sie auf die Schaltfläche “Erstellen” klicken, um Ihre Einstellungen zu speichern und den API-Schlüssel vom Server zu kopieren.
Schritt 2. Konfigurieren Sie das WP Store Locator-Plugin
Nachdem Sie Ihre API-Schlüssel erstellt haben, sollten Sie zu gehen Locator speichern »Einstellungen Seite zum Konfigurieren des Plugins.
Geben Sie den Google Maps-Browser und die API-Schlüssel des zuvor generierten Servers ein. Wählen Sie als Nächstes die Kartensprache und -region aus und klicken Sie auf die Schaltfläche Änderungen speichern, um Ihre Einstellungen zu speichern.
Jetzt müssen Sie auf der Einstellungsseite nach unten zum Abschnitt “Karte” scrollen und einen Startpunkt für die Karte eingeben. Dieser Ausgangspunkt kann eine Stadt oder ein Land sein, sodass Benutzer die Lesezeichen an verschiedenen Orten sehen können.
Auf der Einstellungsseite gibt es viele andere Optionen, einschließlich Kartenstil, Standardzoomstufe, Kartentyp, Suchradius, Land usw. Sie können sie überprüfen und an Ihre Bedürfnisse anpassen.
Sobald Sie fertig sind, ist es Zeit, Standorte hinzuzufügen.
Schritt 3. Fügen Sie Filialen hinzu
Gehe zu Store Locator »Neuer Store Seite, um Ihren ersten Standort hinzuzufügen. Die Seite “Neuer Store” sieht aus wie der Standardbeitrag oder Seiteneditor in WordPress.
Geben Sie einen Titel für Ihr Geschäft ein und scrollen Sie dann zum Abschnitt “Geschäftsdetails”. Von hier aus müssen Sie Ihre Geschäftsadresse eingeben.
In der rechten Spalte wird eine Karte angezeigt, die jedoch nicht automatisch auf die von Ihnen eingegebene Adresse aktualisiert wird. Sie müssen auf die Schaltfläche Veröffentlichen klicken, um Ihren Standort zu speichern. Aktualisieren Sie danach die Seite und die Karte zeigt auf die von Ihnen angegebene Adresse.
Wiederholen Sie nun den Vorgang, um weitere Filialen hinzuzufügen. Sie können beliebig viele Filialen hinzufügen.
Schritt 4. Fügen Sie die Store Locator Map in WordPress hinzu
Um Ihren Store Locator auf einer WordPress-Seite anzuzeigen, erstellen Sie einfach eine neue Seite oder bearbeiten Sie eine vorhandene Seite, auf der Sie die Karte anzeigen möchten.
Auf dem Veröffentlichungsbearbeitungsbildschirm müssen Sie den Block „Funktionscode“ zu Ihrem Veröffentlichungsbearbeitungsbereich hinzufügen. Danach fügen Sie die [wpls] Shortcode darin.
Sie können Ihre Seite jetzt speichern oder veröffentlichen und auf die Vorschau-Schaltfläche klicken, um den Google Maps Store Locator in Aktion zu sehen.
Es zeigt Ihre Kartenmarkierungen für jeden Geschäftsstandort an und startet die Karte von Ihrem bevorzugten Startpunkt aus. Auf dieser Karte konzentriert sie sich beispielsweise auf die Stadt West Palm Beach und zeigt zwei Geschäftsstandorte auf der Karte.
Wir hoffen, dass Ihnen dieser Artikel dabei geholfen hat, den Google Maps Store Locator zu WordPress hinzuzufügen. Möglicherweise möchten Sie auch unsere Liste der kostenlosen Google-Tools anzeigen, die jeder Websitebesitzer verwenden sollte.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.
