Legge inn Google map på hjemmesiden

Hvis du driver en forretning er det gjerne stor sannsynlighet for at du holder til et sted. Kanskje er det også en fordel om kunden kan få oversikt over hvor det er?

Personlig, syns jeg et Google map er et “must have” element på hjemmesiden, både fordi det er praktisk for kunden, men også fordi det gir hjemmesiden et enda mer profesjonelt uttrykk.

Så hvordan går du frem for å legge inn et kart på hjemmesiden din? Først er det greit å vite hvor du vil legge inn kartet, og dermed hvor stor plass du vil gi kartet på siden.

La oss si at du vil bruke hele bredden av siden til å legge inn et kart. Det du gjør da er å bruke et verktøy som forteller deg hvor mange bildepunkter det området måler. I Chrome og Firefox kan du høyreklikke på det området du vil undersøke, og klikke inspect element

Hvis du bruker Chrome vil du få opp Chrome DevTools sprettende opp fra bunnen og du kan undersøke de ulike elementene på siden. Hvis du lar musepekeren gli over de ulike kodene og bokstavene til venstre i panelet som dukker opp vil du se at det dukker opp  markeringer og informasjon alt etter hvilket element du peker på.

Som du ser på bildet over høyreklikket jeg i det området som er bokset inn allerede. Det DevTools forteller meg da er at det området er 842px x 492px.

size

Nå som jeg har den informasjonen, åpner jeg en ny fane i nettleseren min ( Google Chrome) ved å bruke snarveien +T og taster inn adressen til Google maps. Hvis du vil øve på den snarveien – begynn nå! Ellers kan du gå rett til Google maps herfra.

Nå skal vi style kartet til våre behov. Tast inn din adresse og press enter. Deretter gjør du som på bildet:

 

Du får da opp et vindu som ser slik ut:

 

PS: Klikk og HOLD for å flytte rundt på kartet til ønsket posisjon. Google Maps vil da justere din kode slik at kartet vises akkurat slik som du vil ha det på hjemmesiden din. Når du er ferdig med å taste inn størrelsen du ønsker, har flyttet rundt på kartet og er fornøyd, kopierer du koden.

Gå til siden du vil legge inn kartet – Hvis du bruker WordPress, sørg for at du limer inn koden i text modus fremfor visual

 

Publiser eller oppdater siden din. Voila! Gratulerer, nå kan du også vise kundene dine hvor du holder til. Sånn ser det nå ut hos meg:

kartet

 

Et øyeblikk… Her er det noe som ikke stemmer, tenker du kanskje…
Har du fortsatt en informasjonsboble hengende over kartet, som du heller ikke ønsker å ha der?

Følg med for neste innlegg: Fjerne infoboble fra Google maps…