Wilt u Google Maps-winkelzoeker toevoegen aan WordPress? Een winkelzoeker is een kaart die naar uw bedrijfslocatie verwijst.
Hiermee kunnen gebruikers u op de kaart lokaliseren, een routebeschrijving zoeken of de locatie met vrienden delen. Door een winkelzoeker toe te voegen aan uw bedrijfswebsite of zelfs een online winkel , wint u direct het vertrouwen van gebruikers.
In dit artikel laten we u zien hoe u eenvoudig Google Maps-winkelzoeker toevoegt in WordPress.
Google Maps introduceerde een betaalde API om kaarten op websites weer te geven. Ze bieden nog steeds een beperkte gratis optie om Google-kaarten op kleine websites in te sluiten .
De meeste Google Maps-plug-ins voor WordPress gebruiken de Google API om kaarten op te halen en weer te geven. Als u een Google Maps-plug-in wilt gebruiken, moet u zich aanmelden bij het Google API-platform en de factureringsoptie inschakelen.
Het is een pay-as-you-go-service, wat betekent dat er kosten in rekening worden gebracht op basis van het aantal API-aanroepen vanaf uw website.
We laten u zowel gratis als betaalde methoden zien met hun voor- en nadelen, waarna u de methode kunt kiezen die het beste bij u past.
Methode 1. Google Maps gratis aan uw website toevoegen
Deze methode is eenvoudiger en gratis. Het nadeel is dat je niet meerdere winkels op één kaart kunt tonen.
Het wordt aanbevolen voor gebruikers die slechts één Google Maps-winkellocatie aan hun website willen toevoegen.
Eerst moet u de Google Maps- website op uw computer bezoeken. Voer vervolgens het adres van uw winkel in het zoekveld in en Google Maps zal het op de kaart tonen met een vastgezette markering op de kaart.
Zorg ervoor dat de marker op de juiste locatie wordt geplaatst. U kunt een zoomniveau selecteren door op de zoomknop te klikken. Als u eenmaal tevreden bent met het zoomniveau, moet u op de deelknop in de linkerkolom klikken.
Dit zal een pop-up openen waarin u moet overschakelen naar het tabblad ‘Een kaart insluiten’. U ziet nu uw gezochte locatie op de kaart met een HTML-code.
Klik op de link HTML kopiëren om de insluitcode te krijgen.
Ga nu naar het admin-gedeelte van uw WordPress-website. Eenmaal in het admin-gebied, ga je gang en bewerk je het bericht of de pagina waar je de winkellocatiekaart wilt weergeven.
Normaal gesproken voegen gebruikers een winkellocatiekaart toe aan hun contactformulierpagina met hun telefoonnummer en openingstijden.
Op het berichtbewerkingsscherm moet u een aangepast HTML-blok toevoegen.
In het tekstgebied van een aangepast HTML-blok moet u de code plakken die u uit Google Maps heeft gekopieerd.
U kunt nu overschakelen naar het voorbeeldtabblad om Google Maps in uw pagina te zien. Het toont uw winkellocatie gemarkeerd op de kaart met links naar routebeschrijvingen of om de locatie op te slaan.
Methode 2. Voeg Google Maps Store Locator toe met een WordPress-plug-in
Deze methode wordt aanbevolen voor gebruikers die meerdere winkellocaties op een Google Map willen weergeven.
Het eerste dat u hoeft te doen, is het installeren en activeren van de WP Store Locator- plug-in. Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .
Het is een gratis Google Maps-plug-in waarmee u een aangepaste kaart kunt maken met meerdere winkellocaties en aangepaste velden.
Het nadeel van deze methode is dat u een API-sleutel moet toevoegen. U moet uw factuurgegevens opgeven om de API-sleutel te gebruiken. Raadpleeg de website van Google Maps Platform voor prijzen en andere informatie .
Klaar, laten we beginnen.
Stap 1. Genereren van Google Maps API-sleutels
Om de plug-in WP Store Locator te gebruiken, moet u twee API-sleutels genereren. De eerste heet de Browser API-sleutel en de tweede heet de serversleutel.
Laten we beginnen met de browsertoets. Klik op deze Google Developer Console- link en u gaat naar de Google API-website waarop alle vereiste API’s zijn ingeschakeld.
U moet een nieuw project maken en het een naam geven waarmee u het project kunt identificeren. Daarna moet u even wachten terwijl de console het project voor u maakt.
Vervolgens wordt u doorgestuurd naar de configuratiepagina van de API-sleutel. U moet een titel voor uw API-sleutel opgeven, zodat u deze gemakkelijk kunt identificeren als de browser-api-sleutel voor uw Google Maps-project.
Vervolgens moet u ‘Toepassingsbeperkingen’ instellen op ‘HTTP-verwijzingen’. Daaronder moet u het veld ‘Aanvragen accepteren van’ instellen op uw domeinnaam in het volgende formaat.
https://example.com/*
https: //*.example.com/* (als u een subdomein gebruikt)
Klik ten slotte op de knop ‘Maken’. De console slaat nu uw instellingen op en toont u de browsertoets. U moet deze sleutel kopiëren en in een teksteditor plakken, u heeft deze later nodig.
Vervolgens moet u de server-API-sleutel maken. Klik op deze Google Developer Console- link en u gaat rechtstreeks naar de console met geselecteerde API’s ingeschakeld.
U ziet opnieuw de pagina Project aanmaken. Aangezien u echter al een project heeft gemaakt, kunt u gewoon op het vervolgkeuzemenu klikken en uw project selecteren.
U wordt vervolgens doorgestuurd naar de API-configuratiepagina. Geef een naam op voor deze API-sleutel zodat u deze kunt herkennen als serversleutel.
In het gedeelte ‘Toepassingsbeperkingen’ moet u IP-adressen selecteren. In feite vertellen we Google om alleen serververzoeken te accepteren die afkomstig zijn van specifieke IP-adressen.
Nu zou u uw WordPress-hostingprovider moeten vragen om u het IP-bereik dat door uw hostingaccount wordt gebruikt , te vertellen. Het zou de volgende indeling hebben:
172.16.0.0/12
Daarna moet u op de knop ‘Maken’ klikken om uw instellingen op te slaan en de Server API-sleutel te kopiëren.
Stap 2. Het opzetten van de WP Store Locator-plug-in
Nadat u uw API-sleutels heeft aangemaakt, gaat u naar de pagina Winkelzoeker »Instellingen om de plug-in in te stellen.
Voer de Google Maps-browser en server API-sleutels in die u eerder heeft gegenereerd. Selecteer vervolgens de taal en regio van Maps en klik vervolgens op de knop Wijzigingen opslaan om uw instellingen op te slaan.
Nu moet u op de instellingenpagina naar beneden scrollen naar het gedeelte ‘Kaart’ en een startpunt van de kaart invoeren. Dit startpunt kan een stad of een land zijn, zodat gebruikers markeringen op verschillende locaties kunnen zien.
Er zijn veel andere opties op de instellingenpagina, waaronder kaartstijl, standaard zoomniveau, kaarttype, zoekradius, land, enz. U kunt ze bekijken en aanpassen aan uw behoeften.
Als u klaar bent, is het tijd om locaties toe te voegen.
Stap 3. Winkellocaties toevoegen
Ga naar Store Locator »New Store- pagina om uw eerste locatie toe te voegen. De nieuwe winkelpagina ziet er net zo uit als de standaardpost- of pagina-editor in WordPress.
Geef een titel voor uw winkel op en scrol omlaag naar het gedeelte ‘Winkeldetails’. Vanaf hier moet u uw winkeladres invoeren.
U ziet een kaart in de rechterkolom, maar deze wordt niet automatisch bijgewerkt naar het adres dat u hebt ingevoerd. U moet op de knop Publiceren klikken om uw locatie op te slaan. Vernieuw daarna de pagina en de kaart zal naar het door u opgegeven adres verwijzen.
Herhaal nu het proces om andere winkellocaties toe te voegen. U kunt zoveel winkellocaties toevoegen als u wilt.
Stap 4. Het toevoegen van de winkelzoekerkaart in WordPress
Om uw winkelzoeker op een WordPress-pagina weer te geven, maakt u eenvoudig een nieuwe pagina of bewerkt u een bestaande pagina waar u de kaart wilt weergeven.
Op het berichtbewerkingsscherm moet je het ‘Shortcode’-blok toevoegen aan je berichtbewerkingsgebied. Voeg daarna de [wpls] shortcode erin toe.
U kunt nu uw pagina opslaan of publiceren en op de voorbeeldknop klikken om de Google Maps-winkelzoeker in actie te zien.
Het toont uw kaartmarkeringen voor elke winkellocatie en start de kaart vanaf het gewenste startpunt. Op deze kaart is het bijvoorbeeld gericht op de stad West Palm Beach en worden twee winkellocaties op de kaart weergegeven.
Dat is alles wat we hopen dat dit artikel u heeft geholpen bij het leren toevoegen van Google Maps-winkelzoeker in WordPress.
0 Comments