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

Hur man bäddar in Bing Maps i WordPress (steg för steg)

Vill du embedda Bing Maps i WordPress?

Du kan använda Bing Maps för att visa vägbeskrivningar, trafik, rutter och instruktioner för navigation på din WordPress site. Om du inte vill använda Google Maps är Bing en bra alternativ kartapplikation med massor av användbara data.

I den här artikeln visar vi dig hur du enkelt kan embedda Bing Maps i WordPress, steg för steg.

How to embed Bing Maps in WordPress

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.

An example of an embedded Bing map

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.

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.

Sign in to Bing Dev Center

När du har loggat in på ditt account klickar du på menyn ”My Account”.

Välj sedan ”My Keys”.

Bing Maps Dev Center My keys Option

På nästa vy måste du fylla i information om din WordPress blogg eller website.

Klicka sedan på ”Skapa”.

Create Bing Map API key to Embed in WordPress

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

Bing Maps API Key Created

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

How to add a Bing Map to your WordPress website

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

Adding a Bing Map API key to your WordPress website

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

Adding marker categories in WordPress

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

Adding Bing marker categories to a WordPress website

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.

Add Bing map using a plugin

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.

Choosing a location for a Bing map

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

Saving a custom Bing 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.

Add new Marker for Bing Map in WordPress

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.

Adding markers to a Bing map in WordPress

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.

Save Marker for Bing Maps

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

Copy Bing Map Shortcode to embed in WordPress

Om du inte ser någon shortcode ska du kontrollera att du har saved kartan.

Du kan nu öppna den page eller det post där du vill embedda Bing Map. Klicka bara på ikonen ”Add New Block ’+” och skriv in ”Shortcode”.

Adding a shortcode in WordPress

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.

Paste BIng Map Embed Shortcode in WordPress Page Editor

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:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan embedda Bing Maps i WordPress. Du kanske också vill se vår guide om hur man skapar en WooCommerce popup för att öka försäljningen eller vårt expertval av den bästa programvaran för chattsupport 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.

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

7 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. Jiří Vaněk says

    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.

  3. Jiří Vaněk says

    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?

  4. GODZILLA491 says

    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.

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.