I denne artikkelen skal jeg vise deg hvordan du legger til et responsivt Google Maps-kart til en WordPress-nettside (dvs. for en kontaktside) uten å bruke en plugin. Jeg skal bruke WordPress 6.0 for denne opplæringen, samt Twenty Twenty Two-temaet, som er standardtemaet for denne versjonen av WordPress.

 Google Maps-funksjonen lar deg vise bedriftens posisjon på et interaktivt kart, slik at besøkende enkelt kan se hvor du befinner deg og samhandle med kartet for å se hva annet som er rundt deg, få veibeskrivelser osv. Det demonstrerer for besøkende på nettstedet. at du er en lokal bedrift og har en ekte, fysisk plassering. Det er veldig vanlig at bedrifter har et kart på kontaktsiden sin.

Det er tonnevis av Google Maps-plugins der ute, men mange av dem er klønete og krever enten betaling for alle plugin-funksjonene eller en Google Developer-konto med kompliserte trinn som gir et mindre enn ønskelig resultat.

Alt dette er sagt, det er en veldig enkel måte å legge til Google Maps på WordPress 6.0-sidene dine uten plugins og uten en haug med kompliserte trinn. La oss dykke ned i det.

Trinn 1: Lag en HTML-blokk

For det første, logg inn på administrasjonsområdet til WordPress-nettstedet ditt og naviger til "Sider"-delen (rød pil i bildet ovenfor).

Klikk på siden du vil legge til Google Maps-funksjonen din på (du kan klikke på sidenavnet, i mitt tilfelle "Kontakt" - blå pil i bildet ovenfor - eller ganske enkelt klikke "Rediger" under sidenavnet).

Hvis du bruker et blokktema som Twenty Twenty Two, vil du nå være inne i Block Editor for siden din. Rull ned til stedet der du vil sette inn kartet.

Deretter klikker du på “+”-ikonet (“Block Inserter” – rød pil i bildet ovenfor) for å sette inn en blokk.

Søk etter "Gruppe" i søkefeltet (skissert i grønt på bildet) og klikk for å legge til gruppeblokken (rød pil). Dette lar deg legge til noen tilpassede innstillinger til blokkelementet.

Klikk for eksempel på alternativet "Endre justering" (rød pil) og velg "Full bredde" (grønn pil). Dette vil gjøre bredden på blokken som skal inneholde vårt interaktive Google Maps-kart i full bredde.

Deretter klikker du på den store "+"-knappen inne i gruppen (rød pil på bildet ovenfor). Søk etter "HTML" i søkefeltet (skissert i grønt) og klikk på "Custom HTML"-blokken (blå pil).

Du vil se at det nå står "Skriv html..." (rød pil). Det er her vi legger til kartet vårt.

Trinn 2: Generer Google Maps Embed HTML

Vi må nå generere kartet vårt med Google Maps. For å gjøre dette, åpne en ny nettleserfane og naviger til Google.com hvis det ikke er standard søkenettleser.

Deretter skriver du inn adressen du vil vise på kartet. For dette eksemplet bruker jeg Empire State Building (rød pil). Du kan bruke bedriftens eksakte adresse for denne delen (dvs. gatenummer, gate, by, delstat og postnummer – eller hva du enn skriver for internasjonale adresser hvis du ikke er i USA).

Klikk på kartbildet som vises for adressen din på søkemotorresultatsiden (rød pil i bildet – denne vil enten være midt på siden eller til høyre, avhengig av om du har skrevet inn en adresse eller navnet på et sted, som jeg gjorde).

Adressen din vil nå vises som en markør på fullskjermskartet (rød pil i bildet ovenfor). Du vil også se flere ikoner under adressen eller tittelen til stedet du søkte. Disse ikonene inkluderer «Veibeskrivelse», «Lagre», «I nærheten», «Send til telefon» og «Del». Klikk på "Del"-ikonet (blå pil).

I "Del"-fanen som vises, klikk på "Bygg inn et kart"-fanen (blå pil på bildet ovenfor).  

I denne fanen vil du se en forhåndsvisning av den innebygde Google Maps-widgeten din. Det er en rullegardin for størrelse på venstre side av koden (grønn pil) – du kan velge en forhåndsdefinert størrelse eller velge "Egendefinert" for å angi din egen størrelse. Jeg velger "Egendefinert"-alternativet (rød pil).

Her ser du dimensjonene for det tilpassede kartet mitt. Jeg setter høyden, eller den første dimensjonen, til 1200 (rød pil). Jeg lar bredden være satt til 600. Du kan klikke "Forhåndsvis faktisk størrelse" (grønn pil) for å vise kartet i et nytt popup-vindu i full størrelse (pass på at du deaktiverer popup-blokkering hvis du har dem slått på for å unngå å blokkere vinduet). Gå ut av forhåndsvisningsvinduet når du er ferdig.

Klikk deretter på koblingen "Kopier HTML" (blå pil). Dette er koden vi tar med på WordPress-siden vår.

Trinn 3: Lim inn HTML-kode på WordPress-side

Naviger tilbake til nettleserfanen som inneholder WordPress-nettstedet ditt. Klikk på den tomme HTML-blokken der det står "Skriv HTML her ..." og lim inn koden (rød pil) ved å trykke ctrl+v på tastaturet (cmd+v på en mac).

Hvis du klikker på "Forhåndsvisning"-alternativet i blokkverktøylinjen (rød pil), vil du nå se kartet ditt vist på siden din (grønn pil). Klikk tilbake på "HTML"-alternativet for å gå tilbake til HTML-koden (blå pil).

Vi har kartet vårt innebygd på siden vår, men det er ikke responsivt – noe som betyr at hvis vi viser kartet på en mindre skjerm, som et nettbrett eller en telefon, vil det ikke justere størrelsen slik at den passer til skjermen. For å fikse dette, må vi legge til litt tilpasset stil i HTML-koden.

Trinn 4: Gjør Google Maps responsivt

Jeg skal være ved å bruke koden jeg fikk fra denne nettsiden for å gjøre Google Maps-innbyggingen responsiv. Rull ned til delen merket "Hvordan bygge inn Google Maps responsivt" (rød pil). Bla deretter ned til det andre settet med kode (blå pil).

Kopier alt fra " ”  to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).

Naviger tilbake til WordPress. Klikk med musen helt foran HTML-koden for å sette inn denne nye koden i begynnelsen (rød pil). Trykk ctrl+v for å lime inn koden.

Til slutt klikker du helt på slutten av HTML-koden (rød pil) og skriver " " for å stenge alt. I utgangspunktet er det du nettopp gjorde, pakket inn HTML-koden din i tilpasset stil. Denne stilen forteller den besøkendes nettleser om å endre størrelsen på kartet basert på størrelsen på vinduet de ser det i.

Trinn 5: Juster sideforholdet til det interaktive kartet

Det er en siste ting vi må gjøre – bla tilbake opp til toppen av koden til du ser "padding-bottom: 75%;" (rød pil). Denne kodebiten bestemmer sideforholdet til kartet.

Fordi jeg endret størrelsen på kartet til 1200 x 600, har det et sideforhold på 2:1. For dette må jeg endre prosentandelen til "50%" (rød pil).

Hvis du ikke er sikker på hvilken prosentandel du bør bruke for kartet ditt, tar du bare sideforholdet (dvs. 16:9) og deler det andre tallet på det første for å få prosenten din (9 delt på 16 er 56.25%).

Klikk "Oppdater" for å bruke endringene (blå pil i bildet ovenfor), og klikk deretter "Vis side" nederst til venstre for å se resultatet.

Du skal nå se Google Maps-widgeten din (rød pil i bildet ovenfor).

Du kan teste responsen ved å krympe størrelsen på nettleseren din, og deretter rulle tilbake til området på nettsiden som har kartet.

Det var alt for denne opplæringen! Hvis du likte det og vil lære hvordan du lager ditt eget profesjonelle WordPress-nettsted fra bunnen av, kan du melde deg på min WordPress 6.0 for ikke-kodere kurs på Udemy, eller sjekk ut mine andre opplæringsprogrammer!

Pin It Pinterest