Letar du efter ett sätt att bädda in WordPress Google Maps-innehåll på din webbplats?
Liksom många saker i WordPress finns det flera olika sätt att bädda in Google Maps på din webbplats beroende på vilken typ av kartinnehåll du vill inkludera.
I det här inlägget börjar vi med att visa dig hur du lägger till Google Maps i WordPress utan ett plugin. Sedan rekommenderar vi några plugins som kan hjälpa dig att bädda in Google Maps, liksom några av fördelarna med det tillvägagångssättet. Vi dyker också in i hur du använder Google Maps API korrekt, vilket nu krävs.
Slutligen slutar vi med några prestandaöverväganden för att använda Google Maps på WordPress och dela några tips om hur du får din WordPress-webbplats att ladda snabbt även om du behöver bädda in Google Maps.
Du kan klicka nedan för att hoppa direkt till ett visst avsnitt eller bara läsa igenom hela guiden.
- Google Maps API krävs nu
- Så här lägger du till Google Maps i WordPress utan ett plugin
- WordPress Google Maps plugins som ger dig mer flexibilitet
- Google Maps prestandaeffekt och tips för att förbättra prestanda
Google Maps API krävs nu
Från och med den 11 juni 2018 krävs nu en API-nyckel för Google Maps. Om du redan har implementerat Google Maps på din webbplats och det inte längre fungerar kan detta vara anledningen. Eller snarare, du saknar API-nyckeln. Den goda nyheten är att för 99% av er bör det fortfarande vara gratis. Nedan visar vi kostnaden för Google Maps API.
Google ger dig också en återkommande $200 kredit på ditt faktureringskonto varje månad för att kompensera dina användningskostnader. Du kan se här att om du inte genererar tusentals förfrågningar, bör att använda Google Maps på din webbplats inte kosta dig något.
Vad mer har förändrats? Ingenting, men du måste nu göra följande om du vill använda Google Maps i WordPress:
- Registrera dig för ett Google Cloud Platform Console-konto och konfigurera det.
- Lägg till din faktureringsinformation, även om du kanske aldrig kommer faktureras.
- Lägg till API-nyckeln till din Google Maps inbäddningskod eller plugininställningar.
Så här får du en API-nyckel för Google Maps
Nedan ser du hur du får din Google Maps API-nyckel.
Steg 1
Gå till Google Cloud Platform Console. Om du inte har ett konto ännu, skapa ett, det är gratis.
Steg 2
Välj eller skapa ett projekt.
Steg 3
Skapa ett faktureringskonto. Även om de kommer att kräva att du sparar ett kreditkort bör du aldrig debiteras, om du inte går över de höga användningsgränserna.
Steg 4
Du kommer att bli ombedd att välja en eller flera produkter. Detta beror på vilken typ av karta du använder. Till exempel, om du bäddar in en karta på din WordPress-webbplats utan ett plugin (som visas i stegen nedan), då du skulle välja Google Maps Embed API.
Om du använder ett plugin som Google Maps Widget (som visas i stegen nedan), då du skulle välja Google Maps Static API.
Om du använder ett plugin eller ett tema från tredje part borde de ha dokumentation om vilken typ av distribution av Google Maps de använder. Oroa dig inte, du kan alltid lägga till flera typer och ändra dessa senare.
Steg 5
Klicka på ”Aktivera”.
Steg 6
Klicka på ”API” och sedan kommer du att se din API-nyckels ”Referensuppgifter”.
Steg 7
Om du helt enkelt bäddar in din Google Maps API-nyckel kommer det att visas i oformatterad text i källkoden. Därför bör du begränsa detta, annars kan folk använda din API-nyckel på deras WordPress-webbplats eller projekt och driva upp din användning.
För att göra detta, klicka bara på din API-nyckels namn och det låter dig lägga till en begränsning. För din WordPress-webbplats, borde det räcka att helt enkelt lägga till en HTTP-hänvisare. Såsom https://yourdomain.com/*. Detta gör det möjligt att bara ringa anrop på din webbplats.
Så här lägger du till Google Maps i WordPress utan ett plugin
Om du bara vill bädda in en enkel karta och inte behöver mer detaljerad funktionalitet som anpassade platsmarkörer eller andra anteckningar, kan du bädda in Google Maps utan ett plugin med den vanliga Google Maps-webbplatsen som du använder dagligen.
Så här fungerar det…
Steg 1: Kopiera Google Maps Inbäddningskod
För att komma igång, använd webbplatsen Google Maps för att skapa kartan som du vill bädda in.
Om du till exempel vill bädda in en platsmarkör öppnar du den platsen i Google Maps. Eller, om du vill bädda in väganvisningar, öppna väganvisningarna i Google Maps.
När du har kartan som du vill bädda in klickar du på hamburgermenyn i övre vänstra hörnet:
I listan över menyalternativ väljer du alternativet för Dela eller bädda in karta:
Det kommer att öppna upp en Delnings-popup. I den popupmenyn, klicka på fliken Bädda in en karta.
Sedan kan du välja önskad storlek med hjälp av rullgardinsmenyn. För de flesta WordPress-webbplatser fungerar standardstorleken bra, men du kan göra kartan större eller mindre om det behövs.
När du har gjort det, klicka på Kopiera HTML-knappen för att kopiera inbäddningskoden:
Du kommer sedan att behöva lägga till din API-nyckel i koden. Så din kod borde se ut ungefär så här:
<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY¶meters allowfullscreen></iframe>
Steg 2: Lägg till Google Maps inbäddningskod till en WordPress-webbplats
Allt du nu behöver göra är att lägga till den inbäddningskoden till din WordPress-webbplats i inlägget eller sidan där du vill inkludera din karta.
Om du använder den nya WordPress Gutenberg-blockredigeraren som släpptes med WordPress 5.0, kan du göra det genom att lägga till ett anpassad HTML-block och klistra in inbäddningskoden i blocket. Glöm inte att lägga till din API-nyckel.
Du kan förhandsgranska hur din karta kommer att se ut genom att klicka på Förhandsgranskningsknappen ovanför blocket.
Om du fortfarande använder den klassiska TinyMCE-redigeraren kan du lägga till Google Maps inbäddningskod genom att öppna fliken Text och klistra in koden där:
När du har lagt till koden kan du gå tillbaka till fliken Visual för att se en live-förhandsvisning av din karta.
Och det var allt! Du har nyss lärt dig hur du lägger till Google Maps i WordPress utan ett plugin.
Använd Googles Mina Kartor för att bädda in mer komplicerade kartor utan ett plugin
Om du vill bli mer kreativ när det gäller saker som flera platsmarkörer, anpassade anteckningar etc., kan du fortfarande göra det utan att behöva ett plugin med Googles Mina Kartor-tjänst.
Mina kartor är ett officiellt verktyg från Google som låter dig skapa och dela dina egna kartor. Med det kan du skapa något som exemplet nedan, med massor av anpassade markörer och anpassad information som visas när en användare klickar på en markör:
Så här använder du tjänsten för att lägga till anpassade Google Maps till WordPress.
Steg 1: Skapa din karta i Googles Mina kartor
För att komma igång, Kartor och skapa en ny karta. Därifrån kan du använda kartbyggargränssnittet för att bygga din karta:
Även om vi inte kommer att täcka det i detalj, kan detta gränssnitt låta dig bygga några ganska kreativa kartor. För en djupare titt täcker den här hjälpartikeln från Google mycket av den viktiga funktionaliteten.
Steg 2: Generera inbäddningskod
När du är klar med att bygga din karta måste du skapa inbäddningskoden.
Innan du kan få den koden måste du först göra din karta offentlig. För att göra det, klicka på knappen Dela. Klicka sedan på Ändra… i popupfönstret:
Välj sedan På – Offentligt på webben och klicka på Spara:
När du har gjort det klickar du på rullgardinsmenyn nära kartans titel och väljer Bädda in på min webbplats för att generera den faktiska inbäddningskoden:
Det öppnar en popup med koden, som du ska kopiera. Glöm inte att lägga till din API-nyckel.
Steg 3: Lägg till inbäddningskod till en WordPress-webbplats
Nu kan du lägga till inbäddningskoden till din WordPress-webbplats precis som du skulle bädda in koden som du får från den vanliga Google Maps-webbplatsen.
Om du inte är säker på hur man gör det, klicka här för att hoppa till den delen av handledningen ovanifrån.
Använd ett Google Maps-plugin för WordPress istället
Utöver de manuella metoderna ovan finns det också massor av Google Maps-plugins för WordPress som kan hjälpa dig att bädda in kartor på din webbplats.
Det finns några anledningar till att du kanske vill överväga ett av dessa plugins över de manuella metoderna:
- De låter dig skapa mer komplicerade kartor med ett enkelt gränssnitt.
- Du kan göra allt utan att behöva lämna din WordPress-panel.
- Några av dem länkar till WordPress. Till exempel kanske du kan länka kartmarkörer till ett WordPress-inlägg.
- Några av dem kan hjälpa dig att optimera Google Maps för prestanda (mer om detta senare).
För alla dessa plugins måste du skapa din egen API-nyckel för Google Maps innan du kan börja bädda in kartor. Denna handledning visar dig hur man gör det.
Google Maps Widget
Google Maps Widget är ett enkelt Google Maps-plugin som låter dig bädda in en karta med hjälp av Google Maps Static API, som erbjuder en mer prestandavänlig strategi genom att bädda in en statisk bild snarare än en interaktiv karta (vi kommer att förklara mer om detta i nästa avsnitt).
Det är ett bra alternativ om du vill ha något enkelt och lätt. När du har aktiverat det måste du ta din Google Maps API-nyckel och koppla in den i pluginets inställningar. Du kan lägga till en Google-karta till ett widgetområde på din webbplats. Sedan kan besökare öppna en större interaktiv version av kartan i en lightbox:
Du kan också använda en interaktiv karta direkt om så önskas, och Pro-versionen låter dig bädda in kartor var som helst på din webbplats med en kortkod.
Google Maps Easy
Google Maps Easy hjälper dig att skapa egna kartor med egna markörer och anteckningar.
När du lägger till markörer har du möjlighet att ladda upp dina egna ikoner, inkludera text och bilder i markörbeskrivningen och mycket mer. Du kan också styra hur din karta fungerar, som att välja om du vill låta användare zooma in eller inte:
När du bygger din karta kan du bädda in den med antingen en kortkod eller PHP-funktion.
Intergeo
Intergeo är ett annat populärt alternativ som låter dig skapa dina egna kartor med anpassade markörer och ha kontroll över kartfunktioner.
När du har installerat och aktiverat pluginet kommer du att kunna bygga dina kartor direkt från din WordPress-panel:
Sedan kan du bädda in dem var som helst på din webbplats med hjälp av en kortkod.
Gutenberg Block For Google Maps Embed
Gutenberg Block For Google Maps Embed är ett enkelt plugin som lägger till ett dedikerat Google Maps-block till WordPress nya Gutenberg blockredigerare.
Med det här blocket kan du bädda in vilken adress som helst och också välja:
- Mått
- Zoomnivå
- Interaktiv karta vs statisk karta (igen, den senare metoden hjälper till med prestanda)
Det låter dig inte skapa egna kartor – men det är ett bekvämt alternativ om du använder den nya blockredigeraren och bara vill ha ett enkelt sätt att inkludera några enkla kartor.
Google Maps kan sakta ner din WordPress webbplats – Hindra det
Medan Google Maps låter dig bädda in massor av cool funktionalitet till din webbplats med sina interaktiva kartor, finns det en kostnad i form av sämre prestanda eftersom det måste ladda ett stort antal skript för att driva alla dessa interaktiva funktioner.
Lång historia kort, att bädda in interaktiva Google Maps kan sakta ner din webbplats.
Det finns några metoder du kan använda för att bekämpa detta.
Först, om dina besökare inte behöver kunna interaktivt söka i din karta på din webbplats, är ett enkelt sätt att påskynda saker och ting utan några verktyg från tredje part att:
- Ta en skärmdump av kartan som ska användas på din webbplats
- Länka skärmdumpen till kartan på Google Maps webbplats, eller öppna en lightbox-popup med den interaktiva kartan när en användare klickar på den.
På så sätt laddar din webbplats bara en vanlig bild – inte alla skript som är associerade med Google Maps.
Som ett alternativ till att göra detta manuellt, kan du också använda gratispluginet AWEOS Google Maps Iframe load per click. Detta plugin ersätter automatiskt Google Maps inbäddningar med en generisk platshållarbild. Sedan, om en användare klickar på knappen Ladda Karta, kommer det att ladda hela Google Maps inbäddade karta:
Du kan också använda Google Maps Static API, som returnerar en vanlig bild utan JavaScript. Vissa Google Maps-plugins – inklusive Google Maps Widget och Gutenberg Block For Google Maps Embed – låter dig använda Static API när du skapar dina kartor.
Men vi inser att ibland kommer denna statiska strategi helt enkelt inte duga, och många människor vill bädda in den interaktiva Google Maps-upplevelsen direkt.
Om så är fallet är ett annat bra sätt att snabba upp Google Maps att använda latladdning. Med latladdning kommer din webbplats att vänta med att ladda Google Maps-inbäddningar som är längre ner på sidan tills besökarna börjar skrolla nedåt. Det gör dina förstasides-laddningstider snabba, samtidigt som du bäddar in interaktivt Google Maps-innehåll.
Vi har redan skrivit om hur man latladdar bilder och videor och det är samma idé för Google Maps.
Det finns några plugins som låter dig göra detta. Till exempel låter a3 Lazy Load dig att latladda Iframe-inbäddningar vilket inkluderar Google Maps:
Andra alternativ:
Sammanfattning
Om du bara vill bädda in en enkel karta på din webbplats, kan du lägga till Google Maps till WordPress utan ett plugin med hjälp av den inbyggda inbäddningskodfunktionen. Eller så kan du använda verktyget Google Mina Kartor för att skapa en egen anpassad karta och bädda in den.
Utöver dessa manuella metoder, finns också gott om Google Maps-plugins för WordPress som kan ge dig massor av kontroll utan att du behöver lämna din WordPress-panel
Oavsett vilken metod du väljer, var uppmärksam på prestandaeffekten av att använda Google Maps. Försök att bara använda Google Maps när det är absolut nödvändigt och fundera på taktiker som platshållarbilder eller latladdning för att minska den negativa effekten på prestandan.
Har du några andra frågor om att använda Google Maps på WordPress? Låt oss veta i kommentarerna!
Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.
Lämna ett svar