En av de saker som vi har funnit vara viktiga när man bygger en webbplats för ett företag med en fysisk plats är att lägga till en karta.
Google Maps är ofta förstahandsvalet, men vi har upptäckt att Bing Maps kan vara ett bra alternativ som erbjuder unika funktioner och ibland mer exakta restider.
I den här artikeln visar vi dig hur du enkelt kan embedda Bing Maps i WordPress, steg för steg.
Varför add to Bing Maps i WordPress (eller ej Google Maps)?
Om du run en store, restaurang, salong, turistattraktion eller annan fysisk verksamhet, kommer det att göra det lättare för customers att hitta you om du lägger till Bing Maps på din website.
Potentiella customers kan också få vägbeskrivningar till din verksamhet och enkelt dela din location med vänner och familj. Eller ej, embedding av Bings Maps kan förbättra din sökmotorsoptimering i WordPress och göra din site mer synlig i lokala search.
När det gäller att lägga till en karta i WordPress kan Google Maps tyckas vara det självklara valet, särskilt eftersom de erbjuder en Google Maps store location.
Under de senaste åren har dock Bing Maps blivit mer populärt, och båda tjänsterna erbjuder lite olika funktioner, area-täckning och data. Vissa anser att Google Maps överskattar den tid det tar att nå din destination.
Om du inte är nöjd med Google Maps eller ej föredrar Microsoft framför Google, så är Bing Maps ett bra alternativ.
Med detta sagt, låt oss se hur du kan add to Bing Maps till din WordPress website. Använd bara snabblänkarna under för att navigera genom stegen:
Step-by-Step 1: Installera ett tillägg för Bing Map och hämta din API Key
Tidigare kan du bädda in en Bing-karta genom att generera en inbäddningskod från plattformen. Men när vi försökte den metoden fungerar den inte längre.
Av den anledningen är nu det enklaste sättet att embed din Bing-karta på WordPress att använda Ultimate Maps av Supsystic. Detta plugin gör det enkelt att embedda Bing-kartor, Leaflet-kartor och andra Google Maps-alternativ.
Dessutom är det också ett bra alternativ om du run en företagskatalog, där du kan behöva add en karta till varje enskild page.
Observera: Du kanske märker att detta plugin inte har testats med den senaste WordPress-versionen. Men vi har testat det själva och det fungerade bra för syftet med denna poradnik.
Mer information hittar du i vår artikel om huruvida du bör använda plugins som inte har testats med din WordPress-version.
Det första du behöver göra är att installera och aktivera pluginet Ultimate Maps by Supsystic. För detaljerade instruktioner, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
För att använda detta plugin med Bing Maps behöver du en Bing Map API Key.
För att få den här nyckeln skapar du helt enkelt ett konto i Bing Maps Dev Center. Om du redan har ett Microsoft-konto kan du logga in med dina inloggningsuppgifter från Microsoft.
När du har loggat in på ditt account klickar du på menyn ”My Account”.
Välj sedan ”My Keys”.
På nästa vy måste du fylla i information om din WordPress blogg eller website.
Klicka sedan på ”Skapa”.
Efter några ögonblick ser du message ”Key created without problem”.
Du kan nu klicka på ”Show key” och kopiera Bing Maps API key, eller helt enkelt klicka på länken ”Copy key”.
Step 2: Klistra in API Key och skapa markörkategorier
Nästa steg är att klistra in nyckeln i plugin-inställningarna.
I din WordPress dashboard måste du gå till Ultimate Maps by Supsystic ” Settings. Öppna sedan dropdown för ”Maps Engine” och välj ”Bing Microsoft”.
Du kan nu gå vidare och klistra in API-nyckeln i fältet ”Bing Maps API Key”.
När du har gjort det, glöm inte att clicka på knappen ”Save”.
Därefter kanske du vill add to kategorier för markörer. På samma sätt som kategorier och taggar i WordPress kan dessa hjälpa till att organisera intressepunkterna på din karta.
Om du t.ex. skapar en karta för turister kan du skapa kategorier som ”Boende”, ”Restauranger” och ”Ompekningar”.
För att skapa en kategori väljer du bara tabben ”Marker Categories” och klickar sedan på ”Add Category”.
You can now add a title, change the background and text color, and assign child categories to parent categories.
När du är nöjd med den information du har enter klickar du på ”Save”.
För att skapa fler kategorier klickar du bara på knappen ”Add Category”.
Step-by-Step 3: Customize din Bing-karta
När du har gjort det klickar du på tabben ”Add Map”. Nu kan du ange ett namn för kartan, definiera dess bredd och höjd, välja ett läge för navigationsfältet med mera.
You can also configure options to make the Bing Map draggable, use double click to zoom, and more.
Allra viktigast är att du i ”Map Center” skriver in den location som du vill visa. You can either type in the address or the longitude and latitude values.
Det finns många Settings på den här page, så det är värt att titta igenom alla alternativ och göra nödvändiga ändringar.
När du är nöjd med hur kartan är konfigurerad klickar du bara på ”Save Map”.
Efter det kanske du vill markera en eller flera locations på kartan med hjälp av markörer.
Börja med att clicka på tabben Markers och skriv sedan in ett namn på markören. Vanligtvis vill du använda namnet på platsen eller organisationen, men du kan skriva in vilket namn du vill.
Efter det kan du add to text och images till markörens description. You kan också välja en icon för markören.
När du har gjort det måste du enter en adress för markören och välja en markörkategori.
När du är nöjd med hur allt är inställt klickar du på ”Save Marker”.
För att add to fler markörer följer du samma process som beskrivs ovan.
När you add markers kommer map preview att update automatiskt.
Step 4: Embed the Bing Map på din site i WordPress
När du har slutfört customize av kartan kopierar du shortcoden bredvid ”Map shortcode”.
Om du inte ser någon shortcode ska du kontrollera att du har saved kartan.
Du kan nu öppna det WordPress-inlägg eller den sida där du vill bädda in Bing-kartan. Klicka bara på ikonen ”Lägg till nytt block” och skriv in ”Krótki kod”.
När rätt block visas klickar du på det för att add to the page.
Nu klistrar du bara in Bing Map shortcode i blocket.
För att göra kartan Live, klicka antingen på knappen ”Update” eller ”Publicera”. Om du nu besöker din website kommer du att se Bing-kartan i action.
Learn More sätt att embedda element på WordPress
Vill du embedda andra element på din WordPress website förutom en Bing-karta? Kontrollera artiklarna under:
- Hur man enkelt embedar videoklipp i blogginlägg i WordPress
- Så här embedar du enkelt iFrame-kod i WordPress
- Så här embedar du PDF, kalkylblad och andra i WordPress blogginlägg
- Så här embedar du faktiska tweets i blogginlägg i WordPress
- Så här embedar du en YouTube Playlist i WordPress (Bästa metoden)
- Hur man enkelt embedar Instagram i WordPress (Steg för steg)
- Så här embedar du ett Google Forms i WordPress
- Så här embedar du en YouTube Live Streaming i WordPress
- Så här embedar du Facebook-album i WordPress (det enkla sättet)
- Hur man embedar medium blogginlägg på WordPress (enkelt sätt)
- Så här embedar du ett Facebook Group Feed i WordPress
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt bäddar in Bing Maps i WordPress. Du kanske också vill se vår kompletta przewodnik om hur du skapar en WooCommerce-popup för att öka försäljningen eller vårt expertval av den bästa livechattprogramvaran för småföretag.
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.
Jiří Vaněk
Thanks for the practical guide. So far I only had experience with google maps. I will definitely try to integrate BING maps as well, in order to test their functions and possibly also the loading speed.
Jiří Vaněk
Thanks for the tip, I actually never thought of using maps other than Google. But I’m all about speed. Google Maps slows down page loading a lot. Are Bing and Microsoft better off?
WPBeginner Support
The maps would require a similar amount of load time at the moment.
Administratör
GODZILLA491
I don’t know why but it doesn’t work.
I found your tutorial after several minutes spent doing the same things you do but all i had is a blank post.
With google it works, but i need to use bing maps.
WPBeginner Staff
We have a video tutorial for that on our YouTube Channel, don’t forget to subscribe:
http://www.youtube.com/watch?v=JDCoOOLCmQg
Anita
how do I find a video on adding google maps