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 i WordPress (det RÄTTA sättet)

För Local Business är det inte bara en bekvämlighet att visa din location på en interaktiv karta – det är en viktig del av din digitala strategi.

Att lägga till Google Maps på din website kan förbättra användarupplevelsen avsevärt genom att göra det enklare för besökare att hitta din location. Dessutom kan det öka din sites synlighet i search engine, vilket lockar fler besökare och potentiella customers.

Vi har undersökt de bästa sätten att sömlöst integrera Google Maps på din website i WordPress, vilket förbättrar både användarupplevelsen och sökmotorsoptimeringen.

I den här artikeln visar vi dig hur du unlockar kraften i Google Maps i WordPress.

Add Google Maps in WordPress

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

Visste du att Google Maps är den mest populära appen för navigation på alla plattformar?

Om du har en adress till ett kontor eller en fysisk butik kan du lägga till Google Maps på din website i WordPress så att användarna snabbt kan lokalisera dina fysiska butiker, restauranger eller försäljningsställen. Detta hjälper dig att locka fler customers och generera fler affärer.

Inte bara det, men embedding Google Maps kan också förbättra din WordPress sökmotorsoptimering. Enligt Google är 46% av all search lokal. Att lägga till Google Maps till WordPress kan öka din lokala SEO och förbättra din synlighet i lokala sökningar.

Nu finns det två sätt att embedda Google Maps i WordPress, och vi ska visa dig båda.

Fördelen med den andra metoden är att den följer all bästa praxis för Local SEO, så om du använder den kommer Google att börja inkludera din location på Google Maps. Det kommer också att visa din företagsinformation som gillar namn, logga, adress, telefon och öppettider i lokala search-resultat.

Med detta sagt, låt oss se hur du kan add to Google Maps till WordPress. Under finns de snabblänkar som du kan använda för att gå till det avsnitt du föredrar:

Så här addar du Google Maps i WordPress utan ett plugin

Om du bara snabbt vill embedda Google Maps i en WordPress post eller page, kan du använda standard iFrame-metoden.

Gå bara till Google Maps website och skriv in en gatuadress i search area.

Find location in Google Maps and Click Share to Embed

Därefter måste du klicka på ikonen Dela, och det kommer att visa en popup med alternativet att antingen Skicka en location-länk eller Embed en karta.

Du måste välja alternativet ”Embed a map” (bädda in en karta).

Copy Google Maps HTML Embed Code

Därefter kopierar du helt enkelt HTML-koden för Google Maps och öppnar sedan den page där du vill embeda kartan.

I block editor måste du add to ett Custom HTML-block.

Select Custom HTML block in WordPress

Nu kan du helt enkelt klistra in embed-koden som du kopierade från Google Maps.

Efter det måste du updating eller publicera page för att previewa ändringarna.

Google Maps iFrame Embed Code in Block Editor

Den här metoden fungerar för snabb embedning av Google Maps, men den ger dig inte maximala sökmotorsoptimering.

Om du är ett litet företag, en restaurang eller en onlinebutik med antingen en eller flera fysiska locations, rekommenderar vi att du använder nästa lösning för att maximera din Local SEO ranking eftersom den använder korrekta öppna grafdata för att hjälpa dig att ranka högre i Google.

Så här addar du Google Maps till WordPress med ett tillägg för Local SEO

Det bästa sättet att add to Google Maps och optimera din site för lokal SEO är genom att använda All in One SEO (AIOSEO).

Det är det bästa sökmotorsoptimeringspluginet för WordPress eftersom det hjälper dig att få högre ranking utan att behöva editera kod eller anlita en utvecklare. Över 3 miljoner yrkesverksamma använder AIOSEO för att förbättra sin ranking i search engine.

AIOSEO

För denna tutorial kommer vi att använda AIOSEO Pro-versionen eftersom den innehåller funktionen Local SEO och andra kraftfulla optimeringsalternativ. Det finns också en gratis version av AIOSEO som du kan använda för att komma igång med att optimera din site för search engines.

Först måste du installera och aktivera AIOSEO plugin i WordPress. För mer detaljer, vänligen se vår tutorial om hur du installerar ett plugin i WordPress.

Vid aktivering kommer pluginet att starta installationsguiden. Du kan clicka på knappen ”Kom igång” för att konfigurera pluginet. Om du behöver hjälp kan du vänligen läsa vår guide om hur du korrekt konfigurerar All in One SEO i WordPress.

AIOSEO setup wizard

Därefter kan du heada över till All in One SEO ” Local SEO från din WordPress dashboard.

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

Activate local SEO

När Local SEO addon för WordPress är aktiverat kan du lägga till en eller flera locations i AIOSEO och visa dem på Google Maps. Vi visar dig hur du addar båda till din website.

Lägga till en enda location

För att add to your locations, business information, open hours, and more, you first need to go to All in One SEO ” Local SEO and open the ’Locations’ tabs.

Om du har en enda fysisk location ska du låta alternativet ”Multiple Locations” vara inställt på No.

Location tab under local SEO

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

Du behöver bara enter din adress i fältet ”Enter a query”, så visar Google Maps din location.

Pin your store location

När du har enter din location, glöm inte att clicka på knappen ”Save Changes”.

Lägga till flera locations

Om du har mer än en fysisk plats måste du aktivera inställningen ”Flera platser” på tabben ”Location” i Local SEO.

Enable multiple locations

Efter det kommer en new Locations menu att visas i din WordPress adminpanel.

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

Add a new location

När du är i WordPress Editor, rulla ner till ”Map” section.

Här kan du ange din Address i fältet ”Enter a query”.

Add multiple map locations

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

Du kan nu upprepa detta steg och add to så många locations som du vill för your business.

När du har slutfört att lägga till dina locations kan du gå till tabben ’Maps’ tillbaka i All in One SEO ” Local SEO menu.

Här måste du enter en Google Maps API key.

Enter Google maps API key

Låt oss nu se hur man skapar en API key för Google Maps.

Skapa en API Key för Google Maps

För att börja måste du besöka Google Maps Platforms website och klicka på knappen ”Kom igång”.

Google maps platform

När du har loggat in med ditt Google-konto måste du skapa ett konto för fakturering.

Google Maps Platform har pay as you go pricing, och de erbjuder de första $ 300 av månadsanvändningen gratis för alla användare. För de flesta webbplatser kommer det lätt att täcka en enkel karta embed som den vi skapar i den här tutorialen.

Oroa dig inte, de kommer inte att debitera dig några avgifter om du inte manuellt uppgraderar till ett betalt account.

För att komma igång, fortsätt och klicka på knappen ”Skapa konto för fakturering”.

Create a billing account

Därefter kan du selecta ditt land och välja det som bäst beskriver din organisation från dropdown-menyn.

När du har valt den här informationen klickar du på checkboxen för Användarvillkor och sedan på knappen ”Fortsätt”.

Enter personal details for billing account

På nästa vy måste du enter ditt telefonnummer för verifiering.

När du har gjort det klickar du på knappen ”Send Code”.

Enter mobile number

Efter att ha kontrollerat koden är nästa sak att göra att ange ditt företagsnamn, detaljer om betalsätt och faktureringsadress.

När du har enter dessa details klickar du på knappen ”Start my Free Trial”.

Enter business name and payment details

Därefter kommer du att ställas en serie med 4 frågor om din organisation och hur du kommer att använda Google Maps Platform.

Google Maps kommer att fråga om ditt primära mål för att använda plattformen, vilken bransch du befinner dig i, välja ett användningsfall och din företagsstorlek.

När du har svarat på dessa frågor, fortsätt och klicka på knappen ”Submit”.

Answer few questions for google maps

Du kommer nu att se en popup med din Google Maps API key.

You can copy and save this key in a text file for future use.

Copy the API key

Nu när du har skapat en Google Maps API key måste du heada tillbaka till din WordPress dashboard för att enter den i AIOSEO Local SEO-inställningar.

Konfigurera Settings för Google Maps i WordPress

Du kan nu gå tillbaka till All in One SEO ” Local SEO från din WordPress dashboard och sedan navigera till tabben ”Maps”.

Gå vidare och enter Google Maps API Key i fältet ”API Key”. You’ll see a preview of the map in AIOSEO as soon as you add the key.

Add API key and see map preview

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-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

Glöm inte att clicka på knappen ”Save Changes” när du är klar.

Ompekning av Google Maps i WordPress

Därefter kan du add to Google Maps till valfritt WordPress post eller page. Börja med att edit:a eller add:a en new 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.

Add local maps block

Efter det kommer din Google Maps att läggas till på sidan.

AIOSEO låter dig också edit kartinställningarna från alternativen till höger. I instance, you can show labels and icons, add a customize marker, and edit the map’s width and height.

Edit your map in WordPress

Om du har flera locations kan du selecta vilken location som ska lyftas fram genom att välja bland alternativen i menyn till höger.

Klicka bara på dropdown-menyn ”Location” och välj önskad plats som ska visas på din website.

Choose which location to display

När du är nöjd med dina Settings kan du publicera sidan.

Nu kan du besöka din website för att se Google Maps i action.

Preview your map

Du kan också add Google Maps till din sites widget section, gillar sidebar eller footer.

För att börja, heada över till Appearance ” Widgetar från din WordPress adminpanel. Klicka sedan på knappen ”+” och add to widgetblocket ”AIOSEO Local – Map” där du gillar att visa din location.

Add maps widget

Efter det kan du edit widgetar inställningar.

Du kan t.ex. add to en rubrik, ändra kartans bredd och höjd, välja vilken location som ska visas om du har flera locations och edit the label.

Edit map widget settings

Så där ja!

Nu när du uppdaterar din website kommer du att se Google Maps i ditt area för widgetar.

Maps preview in widget area

Expertguider för användning av ompekningar i WordPress

Nu när du vet hur du addar Google Maps till din site kanske du gillar att se några andra guider relaterade till kartor och location i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar Google Maps till din WordPress site. Du kanske också vill se våra val för de bästa WordPress-tilläggen för småföretag och lära dig hur du lägger till en Google Maps Store Locator i WordPress.

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

36 kommentarerLämna ett svar

  1. Dennis Muthomi

    thanks for this well-explained guide! I have an issue that I need help with though. One of my websites has a dark mode color design because tha;ts how the theme was designed and coded. I also use Google Maps quite often, and I know there is a dark mode version available.

    is there a way to add the dark mode version of Google Maps to my website instead of the regular version? I just want the map to match my website’s dark theme design.

    • WPBeginner Support

      At the moment we do not have a recommended easy method for changing the map to their dark mode variant in embeds. If that changes we will be sure to share!

      Administratör

  2. Moinuddin Waheed

    This is really a time and resource saving post for me as I was looking a minimal way of adding a Google map address in one of my clients website and was not sure how to do.
    Both the methods without plugin and with AIOSEO are good and serves my need.
    But I would go with AIOSEO to implement this feature as it will also help in local seo.
    Thanks for this helpful guide for embedding Google map.

  3. melanie bund

    Hi, do you know how to hide the 13px white space at the bottom of the embedded google map?
    Thank you in advance
    Melanie

  4. Donata

    I have a google maps on my web, but the pin which is added to the map is not clickable. The pin only shows the adress but it do not direct if you click on it. Is it possible to do clickable icon?

  5. Sharon

    Don’t you have to get an API from Google before you can use a map plugin and insert it into the plugin? That’s been my experience lately.

    • Mark

      Hi I’m trying to insert a google map onto my website ( Wordpress ) it keeps disappearing am I correct in thinking that google now want $200 a month for this or whatever the cost or can I still insert a map for free

      • WPBeginner Support

        Google now charges for large uses of their maps API which is what the plugin runs on, the $200 you likely saw was the free monthly credit Google gives to those using their API so smaller sites are not charged.

        Administratör

        • Kamil

          Yes, that true but there is alternative for Google maps API. OSMapper is the plugin that uses Open Street Maps API that does not requires any API keys and there is no limit for usage. You can install it from Wordpress.org.

        • WPBeginner Support

          While we have not tested it yet, we will be sure to take a look at it.

  6. Blessy

    I tried the first step: copy the HTML in the after going to the embed button and paste it into the text version of the post. I went to the visual one and saw the embedded google map. I saved it at the site takes out the map. The changed texts remain, though, but the map keeps vanishing. it keeps repeating each try. Why does it happen?

  7. Miranda Olding

    Thanks – so clear x

  8. Sara C

    Great tutorial – short and to the point. I had tried two other plugins that my client didn’t like. Thank you for the manual embedding information. Worked perfectly and quickly.

    Many, many thanks for this tutorial.
    Sara

  9. Denny Png

    Dear Sir/Madam,

    I would like to change the Google Map address & not sure where to locate this embedded link to update the WP backend. I couldn’t find it the contact menu to locate it.

    Seek yr kind advise on it!

    Thankyou!

    Rdgs,
    Denny Png

  10. Kathy

    Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!

  11. divi

    Great Work Bro!!!!

  12. Andy Kramer

    I would love to do this but when I go into google maps and type the address there is absolutely no gear so I can’t even get a link to copy for WordPress. Any ideas or suggestions?

    • Karen

      I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?

  13. Mari

    Hi!
    I can’t find the code.. There’s no ”flower icon” nor other links on the bottom right of the map. Is it because the place I’m trying to add doesn’t have a street address, it’s just coordinates?
    Thanks in advance.

  14. Andy Meuleman

    A great lesson, easy to follow and implement.

    Much thanks, Andy

  15. Karthik

    Is there any way to get this Map as a background to a page with full length say width 100% n height 100% something like that??

    • Parmod

      Can you be more specific about what exactly do you need

  16. Bigg Tobias Inspired

    So, I loved the map tutorial but what if I want to place it in a certain area of the page… Or side bar? Can anyone help?

  17. Carla Spacher

    Thanks so much! Why would anyone bother with a plugin that may ultimately slow down their site when you have provided such easy instructions to grab the code from Google Maps?

    By the way, if anyone is having trouble finding the code. Once you see the map, go to the bottom right-hand corner and click on the flower icon and click on ”Share and embed map”. Then click on ”Embed map” and enter into your WP page/or post.

  18. WRC

    Thank you. Very helpful post.

  19. Rory

    Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
    Thanks for your help.

  20. aamir

    hello sir,

    i want to use plugin which provide exact location. can you suggest me? i use map press, leaflet market, wp google map etc. plugin but still no luck. all this plugin show some far location from my exact location. i want exact location where my shop is located. please help me. or is there any way to develop custom map & put in wordpress site? please provide step by step procedure.

    Thanks & Regards,
    aamir

  21. Trang Tran

    Thanks for taking the time to write this article. It’s very helpful. Is it possible to add a Google Map that is linked with Google Places?

  22. Guilherme

    Very nice. But when we use coordinates, the lightbox map don´t work right. It just shows some place in USA. How can I fix this?

    Thanks

  23. Bongo

    Powerful stuff man. Thanks

  24. Christopher Rose

    Thanks for all the informative WP articles you’re posting.

    Is it possible to add a Google Map to a site that

    1. automatically adds the location of all site visitors or commenters to a map
    and
    2. allow all customers to be added, probably manually, although an automatic option would be good too. I have a small ecommerce site that has customers all over the world and thought it would be fun to show where we have sent stuff to.

  25. Widdershins

    That is so cool! … thanks :D

    • zakaria

      Thank you very much!

      I have already founded (MapPress Easy Google Maps) and it is nice plugin.
      And of course, your attention is very nice support. THANKS!!!
      One more thing, please.
      I would like to use these maps in tabs but only tab’s (shortcode) plugin I have found so far which shows maps is (Jshortcode). (I mean it shows in second or third tab. The others aren’t showing in second or third tabs.) It is nice plugin too but has very colorful tabs.
      May be you would be so kind to advice some other plugins to solve this problem.

      Thanks advance
      Best regards
      Zakaria

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.