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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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”.
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”.
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.
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”.
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”.
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”.
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”.
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”.
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”.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Så där ja!
Nu när du uppdaterar din website kommer du att se Google Maps i ditt area för widgetar.
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.
- Hur man bäddar in Bing Maps i WordPress (Steg för steg)
- Så här addar du en interaktiv karta i WordPress
- Hur man embedar en Google Map i Contact Forms (med Map Pin)
- Bästa Google Maps tillägg för WordPress (de flesta är gratis)
- Hur man addar Google Maps Store Locator i WordPress
- Bästa plugins för butikslokalisering i WordPress för att öka lokal SEO
- Hur man addar flera locations till Local Business Schema i WordPress
- Så här addar du autokomplettering för Address-fält i WordPress
- Bästa tillägg för geolokalisering och GeoIP 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.
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
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.
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
WPBeginner Support
For tweaking the CSS, it would depend on the specific embed but you can find the CSS needed to change using Inspect Element. We have a guide on Inspect Element you may find helpful here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administratör
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?
WPBeginner Support
For what you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/
Administratör
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.
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?
Miranda Olding
Thanks – so clear x
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
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
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!
divi
Great Work Bro!!!!
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?
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.
Andy Meuleman
A great lesson, easy to follow and implement.
Much thanks, Andy
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
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?
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.
WRC
Thank you. Very helpful post.
Rory
Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
Thanks for your help.
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
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?
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
Bongo
Powerful stuff man. Thanks
Erwin
Nice straight forward instructions. I posted a nice trick on how to get rid of the info bubble on the other day (http://goodwebsites.co.nz/how-to-remove-info-bubble-for-embedded-google-maps). Might be helpful.
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.
Widdershins
That is so cool! … thanks
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