Lägga in en karta från Google Maps

Visst är det lite coolt att enkelt kunna visa upp på en karta vart en besökare pådin webbplats ska åka, kanske till ditt kontor eller en plats för workshopsoch så vidare. Kartor har många användningsområden och visst är defräcka att ha med. De kan till exempel se ut så här, som på mitt företags hemsidadär vi visar våra kontor med smidiga och enkla kartor för att få en känsla av vari Stockholm och Göteborg vi finns någonstans. Jag ska visa dig hur du enkelt lägger in det här själv. Nu, i Wordpress 5.0 och senare och i Gutenberg som editorn heter, så är detsuperenkelt. Det jag behöver är ett litet plug-in, ett tillägg, som gör det här. Tillägget som jag rekommenderar heter Premium Blocks for Gutenberg. Det ger digförutom ett kartblock några andra block som också är lite fiffiga och smidiga somgör spännande saker. Mer om det i andra videos. Men kartblocket låter dig lägga in en karta. Liksom alla bra tv-kockar har jagförberett lite också. Jag har redan installerat tillägget, för jag tänker attdet har du gjort många gånger förr vid det här laget. När jag gjorde det fickjag inställningsrutan här, Premium Blocks for Gutenberg. Under Settings, underPremium Blocks for Gutenberg, behöver du en API-nyckel för Google Maps. Den här API-nyckeln är sättet vi auktoriserar att du får hämta en kartafrån Google. Det här kommer inte att leda till någon kostnad för de allra flestasajter, om du inte har en jättepopulär sajt. För att skaffa en sådan härAPI-nyckel klickar du på länken Klicka här för att få din nyckel. Så följer du desteg hos Google som Google visar att du behöver göra. Till slut får du en nyckel som är en textsträng på ett antal tecken och siffrorsom inte säger så mycket. Den klistrar du sedan in i API-rutan här. Därefter kan jag gå och skapa min karta. Jag har ju förberett en liten sida här somheter Kontakta mig, där jag vill ha en karta. Du kan besöka mig på mitt kontorhär. Jag klickar i mitt block, slår ettEnter-slag och för musen över för att få det här bekanta plusset för Gutenberg. Så skrollar jag ner tills jag hittar Premium Blocks och expanderar densektionen. Här, som ett av blocken, hittar jag Maps som jag även kunde ha sökt efter.

När jag lägger in det ser jag en visning av kartan. Jag ska direkt kolla påblockinställningen här till höger så att jag kan sätta in mitt kontors positionhär i en markör, som den röda pluppen heter. Under Center Location sätter jagin en latitud och en longitud där jag vill att kartan ska centreras kring. Det finnsbra hjälptjänster för att du ska kunna ta fram vad en adress har för latitud ochlongitud. Klicka bara på länken <i>Here</i> på Get Your Location Coordinates from Here. Då kommer du till latlong.net. Här skriver du in gatuadressen och får latitud ochlongitud tillbaka. Så jag kopierar och klistrar in latitud i latitudfältet ochlongitud i longitudfältet. Så hamnar kartpluppen i Stockholm. Detfiffiga här är så klart att du ser hur kartan uppdateras hela tiden. Jag går vidare till sektionen Marker och stänger den tidigare för att göra detmer lättöverskådligt. Jag vill ha min Marker. Skulle jag intevilja ha den röda pluppen kan jag enkelt ta bort den, men jag vill att den ska visaexakt var kontoret finns. Sedan skriver jag som titel Mitt kontor.

"Du hittar mig på Klarebergsviadukten 70." Enkelt och smidigt. Du kan göra flerinställningar som du kan leka med i lugn och ro, inklusive att ladda upp din egenikon här istället för den röda pluppen om du vill designa och skapa något självsom syns där istället. Jag går vidare till Marker Style ochstänger den tidigare igen. När jag klickar på den här får jag uppen visning med den titel och text som jag skrev. Här kan jag ändrafontstorleken, hur stor titeln ska vara, och jag kan även ändra färg. Jag tyckeratt svart passar bättre så jag sätter svart. Jag kan så klart göra motsvaranderedigering för beskrivningen.

Jag kan också välja vad för kartinställning jag ska ha. Vill jag visamöjligheten att byta mellan karta och satellit, få fullskärm, zooma in och uteller vill jag kanske ha en satellitkarta direkt från början. Det här kan jagställa in. Jag gillar Road Map för det är lättare att hitta, så klart, med den. Jag kan även sätta hur hög jag vill att kartan ska vara. Jag tycker att det inte är så hjälpsamt just nu att se halva Sverige på bild. Så jag vill zooma in lite. När jag gör det ser du att vi zoomar ininteraktivt här och någonstans här tycker jag att det är lättare att hittaoch få en bra översikt över Stockholm. Jag vill egentligen inte att det ska varamöjlighet att byta mellan karta och satellit, så jag klickar bort den härinställningen. Zooma tycker jag däremot att användarna kan få göra. Men fullskärm kommer de inteatt behöva. Jag vill heller inte att det ska gå att zooma in och ut genom attskrolla över kartan, som du normalt sett kan göra i Google Maps men som blirlite jobbigt på en webbplats när du kanske egentligen vill skrolla upp och ner påsidan och plötsligt hamnar i kartan.

Om du vill kan du skaffa en egen stil på kartan. Den kan bli blå, grön, svart, vit. Det finns ett hjälpverktyg här. Det är lite mer avancerat så jag kommerinte att berätta exakt hur du gör. Men följer du den länken kommer duatt få en bit kod som du klistrar in i den här rutan – om du vill skapa dinhelt egna stil på kartan. När du känner dig redo trycker du precissom alltid bara på Uppdatera för sidan. Jag kan visa och se hur den här blir påmin sajt just nu. En karta som är helt interaktiv, jag kan zooma in och utoch klicka för att se vad jag har skrivit. Superenkelt och smidigt för besökarenoch väldigt lätt för dig att lägga in på sidor, i inlägg, var du än vill ha detpå din webbplats. En enkel karta via Google Maps.