Hoe Google Maps Store Locator toe te voegen in WordPress - DeLaatbusiness
chatbots marketing

Hoe Google Maps Store Locator toe te voegen in WordPress

6 min


113

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.

Hoe u een 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.

Een kaart delen in Google Maps

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.

Kopieer de insluitcode van Google Maps

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.

Een aangepast HTML-blok toevoegen in WordPress

In het tekstgebied van een aangepast HTML-blok moet u de code plakken die u uit Google Maps heeft gekopieerd.

Kaarten insluiten code in WordPress

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.

Bewaar locatie gemarkeerd op de kaart

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.

Maak een nieuw project

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.

Browser api key instellingen

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.

Kopieer browser api key

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.

Selecteer uw Google Maps-project

U wordt vervolgens doorgestuurd naar de API-configuratiepagina. Geef een naam op voor deze API-sleutel zodat u deze kunt herkennen als serversleutel.

Stel IP-beperkingen in

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 Google Maps Keys in

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.

Voeg een startpunt toe voor uw winkelzoekerkaart

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.

Adres opslaan

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.

Winkelzoeker shortcode

U kunt nu uw pagina opslaan of publiceren en op de voorbeeldknop klikken om de Google Maps-winkelzoeker in actie te zien.

Store locator kaartvoorbeeld

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.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format