Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här addar du Google Maps Store Locator i WordPress

Med många års erfarenhet av att optimera WordPress-webbplatser för lokala företag förstår vi vikten av att hjälpa kunderna att hitta dig enkelt. Att lägga till en Google Maps-butikslokalisering på din WordPress-webbplats är ett enkelt men effektivt sätt att uppnå detta.

En butikslokalisering pekar ut ditt företags läge på en karta, vilket gör det enkelt för kunderna att få vägbeskrivningar och dela ditt företags läge med vänner.

I den här guiden visar vi dig hur du enkelt lägger till en Google Maps-butikslokalisering i WordPress.

How to Add Google Maps Store Locator in WordPress (Free Option)

Varför lägga till Google Maps Store Locator i WordPress?

Många WordPress-användare driver webbplatser för småföretag som betjänar en viss stad eller region. Detta inkluderar företag som restauranger, fastighetsmäklare, rörmokare, leverantörer av underhållstjänster, små butiker, salonger och mycket mer.

Dessa lokala företag förlitar sig på synlighet online för att locka kunder. Dessutom visar statistik att 53 % av användarna av mobila enheter söker efter vägbeskrivningar till lokala butiker i Google-sökningar.

Att lägga till en Google Maps-butikslokalisering på din webbplats är viktigt för att driva fottrafik eftersom det kan hjälpa människor att hitta ditt företag lättare. De kommer att kunna få köranvisningar till din butik och dela platsen med sina vänner.

Det kan också bidra till att förbättra din sites synlighet i search engines och locka fler besökare till din website.

Låt oss ta en titt på hur du lägger till en Google Maps store locator på din WordPress site. Vi visar dig både gratis och betalda metoder med sina för- och nackdelar, så att du kan välja den som bäst passar dina behov.

Metod 1: Lägga till en enkel locator för butiker till WordPress (gratis)

Den här metoden är gratis och enkel eftersom den inte kräver extra ansträngning för att skapa en Google Maps API key. Den rekommenderas för användare som vill add to en enkel karta över sin stores location.

Först måste du besöka Google Maps website på din dator. Därefter enter du din stores adress i search-fältet och Google Maps kommer att visa den på kartan med en fastnålad markör.

Search for Your Store Location in Google Maps

Se till att markören är placerad på korrekt location. Du kan välja en zoomnivå genom att clicka på zoomknapparna längst ner i högra hörnet.

När du är nöjd med hur kartan ser ut måste du klicka på delningsknappen i den vänstra colonnen. Detta kommer att visa en popup där du måste byta till tabben ”Embed a Map”.

Select Google Map's Embed a Map Option

Du kommer nu att se din searchade location på kartan med HTML-kod. Du bör clicka på länken ”Copy HTML” för att få embed-koden.

Nu head över till admin area på din WordPress webbplats och redigera posten eller sidan där du vill visa kartan för store locator.

Normalt lägger användare till en karta över butikslokalisering på sin kontaktformulärsida med företagets telefonnummer och öppettider.

På vyn för edit av post måste du lägga till ett ”Custom HTML”-block.

Add a Custom HTML Block to Your Page

Du ska klistra in koden som du kopierade från Google Maps i textområdet i blocket ”Custom HTML”.

You can now preview the page to see Google Maps embed into your page. Det kommer att visa din stores location markerad på kartan med links för att få vägbeskrivningar dit eller för att save platsen.

Preview of Embedded Google Map

Den här metoden fungerar för snabb embedning av Google Maps, men den ger dig inte maximala sökmotorsoptimering. Med andra ord hjälper den dig inte att ranka högre och få mer trafik från search engines eller Google Maps-sökningar.

Om du är ett litet företag, en restaurang eller en webbutik med en eller flera fysiska platser rekommenderar vi att du använder nästa lösning för att förbättra din lokala SEO-rankning.

Metod 2: Lägga till en Store Locator med Local SEO (rekommenderas)

Nästan 46% av all search på Google har lokal avsikt. All in One SEO (AIOSEO) är det bästa WordPress SEO plugin på marknaden och hjälper dig att få mer gratis trafik från search engines till din website.

Med AIOSEO kan du ange dina butiksplatser, kontaktuppgifter och öppettider med hjälp av schema markup så att informationen visas på sökmotorernas resultatsidor.

När du till exempel söker efter ”McDonald’s-ställen i Florida” på Google visas en featured snippet med de olika destinationerna och en karta med utmarkerade platser.

Multiple location map preview on Google

Detta kommer att förbättra din websites sökmotorsoptimering och öka antalet clicks i search.

Obs/observera: Du behöver minst AIOSEO Plus-planen för att få tillgång till den utvalda Local SEO-funktionen som behövs för denna tutorial.

Först måste du installera och aktivera plugin-programmet AIOSEO för WordPress. Mer detaljer finns i vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Vid aktivering kommer plugin att run en setup wizard. Om du behöver hjälp med att konfigurera pluginet, vänligen ta en titt på vår guide om hur du konfigurerar AIOSEO för WordPress.

AIOSEO setup wizard

När installationsprocessen är klar måste du heada över till All in One SEO ” Local SEO på din WordPress dashboard.

Du kan klicka på knappen ”Activate Local SEO” för att komma igång med att konfigurera de lokala inställningarna.

Activate Local SEO in AIOSEO

Därefter måste du klicka på tabben ”Maps” högst upp på Local SEO page.

På sidan Maps bör du se fältet ”API Key”.

Paste Your Google Maps API Key

Du kan få en API key för Google Maps genom att gå till Google Maps Platform och logga in med ditt Google account.

Efter det klickar du på knappen ”Kom igång”.

Welcome to Google Maps Platform

Google Cloud resources är organiserade efter projekt. Om du inte redan har ett projekt kommer ett att skapas åt dig automatiskt.

Obs/observera att du måste aktivera fakturering för projektet för att kunna använda Google Maps API. Det är dock osannolikt att you någonsin kommer att betala något.

Förfrågningar om embed av Google Maps är gratis med obegränsad användning enligt detaljerna i Googles documentation, och du får också 200 USD i månadskredit varje månad.

Du måste klicka på knappen ”Create Billing Account”.

Enable Billing for Your Project

You will now see the Account Information page. You should select your country from the drop-down menu and agree to the terms of service.

När du är klar klickar du på knappen ”Fortsätt”.

Agree to Google Maps Terms of Service

Nu måste du välja en befintlig profil för betalningar eller skapa en new.

Profilen kommer antingen att vara för en enskild person eller ett företag och kommer att innehålla namnet på den enskilda personen eller företaget, en betalsätt och en adress.

Start Your Free Trial

När du har enter den informationen måste du clicka på knappen ”Start My Free Trial”.

Oroa dig inte för formuleringen ”gratis provperiod”. Map embed requests förblir gratis även när den kostnadsfria provperioden har avslutats, och ditt credit card kommer aldrig att debiteras förrän du manuellt uppgraderar till ett betalt account.

You may also be asked to fill in a 30-second survey of your business to make sure you are given the most relevant information.

You May Be Asked to Fill In a 30 Second Survey

När du klickar på knappen ”Submit” kommer din Google Maps API key att visas. Du måste enter den här nyckeln i plugin-inställningarna för metoderna 2 och 3.

Sedan kan du klicka på ikonen ”Copy to Clipboard” i slutet av fältet ”Your API Key”. När du har gjort det är det bara att dismissa popupen genom att clicka på knappen ”Go to Google Maps Platform”.

Copy Your API Key

Begränsning av din API Key för Google Maps

Vi rekommenderar att du begränsar nyckeln så att den inte kan användas av andra.

När du har skapat din API key kommer Google att visa en ”Protect your API key” popup där du kan begränsa din key så att den bara fungerar på din egen website.

I rullgardinsmenyn ”Select restriction type” måste du välja ”HTTP referrers (web sites)”. I nästa fält ska du skriva in domain name för din website i fältet ”New object” med mönstret *example.com/*.

Protect Your API Key

Du bör se ett message som säger: ”Successfully restricted your API key. Nu fungerar nyckeln bara för Google Maps som är embedade på din specifika website.

Tillbaka på din website ska du enter din API key i fältet. Därefter kan du rulla ner för att editera kartinställningarna.

AIOSEO låter dig visa Google Maps med hjälp av ett Gutenberg (WordPress editor) block, shortcode, widget eller PHP-kod. Det låter dig också välja olika kartstilar och add to en customize-markör till din karta.

Edit map settings

För denna tutorial, se till att inställningen ”Gutenberg Block” är vald. Glöm inte att clicka på knappen ”Save Changes” när du är klar.

Nu kan du skapa din karta för lokalisering av butiker. Hur du gör detta beror på om ditt företag bara har en store eller flera locations.

Lägga till en karta för en enskild location

Om ditt företag har en enda fysisk location kommer kartan att använda den information som du tillhandahåller på All in One SEO:s page ”Locations Settings”.

Gå vidare nu och byt till tabben ”Locations” på All in One SEO ” Local SEO page.

Eftersom you har en enda fysisk location bör du se till att alternativet ”Multiple Locations” är inställt på ”No”.

Set Multiple Locations to No

Därefter ska du rulla ner till ”Business Info” -sektionen och fylla i så mycket information om ditt företag som möjligt.

Detta är viktigt eftersom informationen kan visas när någon söker efter ditt företag med hjälp av Google search eller Google Maps.

Business Info Will Be Displayed in Google Searches

Därefter rullar du ner till ”Maps” -sektionen för att fästa din exakta location.

Du behöver bara enter din address i fältet ”Enter a query”. En nål kommer att läggas till på den platsen, och du kan flytta nålen genom att dra den till en new location om det behövs.

Enter Your Store Location as a Query in the Map Section

När du är slutförd måste du rulla högst upp eller längst ner på sidan och klicka på knappen ”Save Changes” för att lagra dina inställningar.

Nu kan du add to din store locator map till valfri WordPress post eller page. För att börja, redigera eller lägg till ett nytt post eller page på din website.

När du är i block editor, click the ’+’ button at the top and add the ’AIOSEO Local – Map’ block anywhere on the page. Se till att du klickar på knappen ”Update” eller ”Publicera” när du är slutförd.

Add an AIOSEO Local Map Block to Your Page

Grattis, du har utan problem addat en Google Maps Store Locator till din site.

Lägga till kartor för flera locations

För att add to en karta för en annan location måste du navigera till tabben Locations på All in One SEO ” Local SEO page. När du är där måste du klicka på alternativet ”Ja” för flera locations och sedan klicka på knappen ”Save Changes” högst upp på vyn.

Set Multiple Locations to Yes

När du har sparat dina ändringar kommer du att notera att en new Locations custom post type har lagts till i admin sidofältet. Det är här du kommer att enter dina företags locations.

Gå vidare och navigera till Locations ” All Locations och klicka sedan på knappen ’Add New’.

Add a new location

Då kommer du till Editorn för Locations. Du måste add to en titel för den location du lägger till, t.ex. namnet på butiken eller staden.

Nu ska du rulla ner till ”AIOSEO Local Business” -sektionen på sidan, under innehållet i posten.

Se till att du enter så mycket information som möjligt eftersom den kan visas när någon söker efter ditt företag i Google search eller Google Maps.

Fill In the Business Info Section

Efter det ska du hitta ”Maps” section och enter your address i fältet ”Enter a query”.

En nål kommer att displayed på den location.

Add multiple map locations

När du har angett din location på kartan och lagt till platsinformation kan du klicka på knappen ”Publicera”.

You can now repeat this step and add to your other business locations.

När du har slutfört kan du add to en karta över butiken på din website för varje location genom att använda blocket ”AIOSEO Local – Map” i WordPress editor.

Add an AIOSEO Local Map Block to Your Page

Nu måste du välja vilken location som ska visas på kartan.

Det gör du genom att titta på rutan för blockinställningar till höger på vyn och välja den store du vill visa i rullgardinsmenyn ”Location”.

Choose a Store Location From the Drop Down Menu on the Settings Pane

Lägg bara till ytterligare block med lokala kartor för alla andra locations. Glöm inte att klicka på knappen ”Publicera” eller ”Update” högst upp på sidan för att visa kartorna på din website.

Metod 3: Ompekning av flera olika locations för butiker på en enda karta

Med de två första metoderna kan du add to kartor för lokalisering av butiker med en enda location. Om du har flera locations måste du add to en separat karta för var och en av dem.

Alternativt kan du använda vår tredje metod för att visa flera locations på en och samma karta.

Det första du behöver göra är att installera och aktivera Locatoraid Store Locator plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Vid aktivering måste du gå till Locatoraid ” Configuration och konfigurera tillägget.

I fliken ”Google Maps” måste du klistra in en Google Maps API key. Du kan följa metoden ovan i metod 2 för att skapa en.

Sedan måste du clicka på ’Save’ iconen för att store nyckeln. You should notice that Google Maps is able to load correctly in the ’Map Style Preview’ window.

Paste Your Google Maps API Key

Därefter kan du gå till tabben ”Configuration” och välja om du vill visa miles eller kilometer på kartan.

Du kan också kontrollera de andra alternativen, till exempel adressformat, de detaljer som du gillar att visa på kartan och vilka användare som kan använda plugin.

Configure Your Map Including the Units You Wish to Use

När du är nöjd med inställningarna för pluginet, se till att du klickar på knappen ”Save” för att spara dina inställningar.

Nu är du redo att add to locations för dina butiker. Du ska navigera till Locatoraid ” Locations. Väl där måste du klicka på knappen ”Add New”.

Click the Add New Button on the Locations Page

Detta kommer att ta dig till ”Add New Location” page. Här kan du skriva in namnet på butiken, location och andra details.

När du har slutfört ska du klicka på knappen ”Add New Location” längst ner på sidan.

Fill In Your Store's Address and Other Information

You will be taken to the ”Edit Location” page where you can see the store location on a map.

Om allt ser bra ut ska du klicka på knappen ”< Location” högst upp på skärmen för att återgå till Locatoraid ” Locations page i din dashpanel.

Confirm That the Map Is Correct Then Click the Locations Button

Du kan lägga till fler locations genom att clicka på knappen ”Add Location” och upprepa dessa steg.

När du har skapat alla dina stores locations kan du add to kartan på din website.

Lägg bara till eller edit en page och click den blå ikonen ”+ Add Block”. Du ska dra ett Shortcode block till sidan och sedan enter shortcode [locatoraid] i fältet.

Add a Shortcode Block to Your Page

Denna standard shortcode fungerar bra för de flesta websites. Du kan dock customize kartan genom att använda en annan shortcode. Besök sidan Locatoraid ” Publicera för att lära dig mer.

Nu kan du publicera eller updating the page och besöka din website för att se kartan över din store locator.

Alla dina stores locations kommer att visas på samma karta. Om dina användare skriver in sin adress eller klickar på länken ”Locate Me” kan de hitta de närmaste butikerna och få vägbeskrivningar.

Preview of Locatoraid Map With Multiple Locations

Vi hoppas att denna handledning hjälpte dig att lära dig hur du lägger till en Google Maps-butikslokalisering i WordPress. Du kanske också vill lära dig hur du skapar en interaktiv karta i WordPress eller kolla in vår lista över de bästa schema markup-pluginsen för din webbplats.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

5 kommentarerLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Priscilla says

    Hi there, the shortcode you have in the instructions on this page for the store locator is incorrect and conflicting.
    you have [wpls] in the instructions but the actual shortcode which you have in the screenshot is [wpsl].
    The s and the l are around the wrong way :)

  3. Pablo Cardozo says

    Since Google Maps charges for using its service, would not it be nice to also offer the option to use Open Street Map? I’m sure there must be plugins that do it and doing it by hand is not so different from the Google option either.

    • WPBeginner Support says

      We do not have a specific plugin we would recommend at the moment but we will certainly keep an eye out.

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.