Kart er et essensielt aspekt av enhver bedriftsnettsted. Selv om du er helt internettbasert, vil kundene fortsatt vite hvem du er og hvor du bor. Google Maps er nå standard for mange nettsteder, ettersom det er det enkleste å bruke, tilsynelatende det mest nøyaktige og er gratis. Ved slutten av denne opplæringen vil du vite nøyaktig hvordan du kan legge inn et responsivt Google Map på nettstedet ditt.
Standard Google Maps er ikke alltid lydhøre, så det kan hende at de ikke skaleres til forskjellige skjermstørrelser. Avhengig av om du bruker en WordPress-plugin eller selv legger inn den ved å bruke kode, kan det hende du må legge til et par linjer med CSS for å gjøre kartet responsivt.
Responsivt webdesign
Responsiv er et nøkkelbegrep her. Den beskriver webdesign som tar hensyn til brukeropplevelsen og enheten for å sikre at den er den samme uavhengig av hvilken enhet du bruker for å få tilgang til nettstedet. For eksempel skal et responsivt nettsted gi den samme kvaliteten på opplevelsen uansett om du besøker den på et skrivebord, nettbrett eller smarttelefon.
For å gjøre dette, må nettstedet tilpasse seg forskjellige oppløsninger, skjermstørrelser og berøre dem.
Legge ned et responsivt Google Map på et nettsted
Det er tre måter jeg kjenner til for å legge inn Google Maps på et nettsted. Hvis du bruker et WordPress-tema, kan det ha funksjonen innebygd. Du kan også bruke en plugin eller du kan legge inn kode direkte fra Google på hvilken som helst webside. Det første og andre alternativet er bra for WordPress-brukere, andre CMS bruker plugins også, slik at du er dekket der. Det endelige alternativet, å bruke kode, skal fungere på de fleste nettsteder uavhengig av hvordan de er bygget.
Bruk et WordPress-tema for å legge inn et responsivt Google Map
Noen WordPress-temaer vil ha en funksjon spesifikt for Google Maps. Siden kart er så viktig for moderne nettsteder, har noen temautviklere implementert dem direkte i designene sine. Hvis temaet ditt har en kartfunksjon, vil du sannsynligvis trenge en Google Maps API for å få det til å fungere. Du legger til API i temalternativene, og det vil snakke direkte med Google for å bygge kartet ved hvert besøk.
- Besøk denne siden på Googles nettsted for å starte API-prosessen.
- Velg den blå Kom i gang-knappen.
- Velg menylikonet på tre linjer øverst til venstre på det nye skjermbildet.
- Velg APIer og tjenester og deretter legitimasjon.
- Velg Opprett legitimasjon og deretter API-nøkkel.
- Velg Begrensningsnøkkel og velg HTTP-henvisninger.
- Velg Lagre.
- Kopier API-nøkkelen og lim den inn på siden med designalternativer som krever det.
Når du har API-nøkkelen, kan du implementere Google Map på nettstedet ditt ved hjelp av temadesignverktøyene. Så lenge temaet er responsivt, bør kartet også være det.
Bruk en plugin for å legge inn et responsivt Google Map
WordPress bruker plugins, Joomla bruker Extensions, Drupal bruker moduler eller plugins og andre CMS bruker lignende navnekonvensjoner. Uansett, plugins refererer til modulære elementer du kan bolt på kjernen CMS for å legge til funksjoner. En nyttig funksjon er et Google Map. Hvis nettstedstemaet ditt ikke inkluderer et kartelement og du ikke ønsker å gjøre koden selv, er en plugin den neste beste tingen.
- I WordPress naviger du til Plugins og Legg til nytt.
- Søk på Google Maps og velg en plugin du liker utseendet til.
- Aktiver den i plugins og gå til Innstillinger.
- Legg til Google Maps API du opprettet ovenfor der det er indikert og Lagre.
- Implementere pluginprogrammet uansett hvor du vil at kartet skal vises.
Andre CMS avviker litt i navngiving og menyposisjoner, men prinsippet er stort sett det samme. De fleste, om ikke alle, kartprogramtillegg krever at Google Maps API fungerer.
Bruk kode for å legge inn et responsivt Google Map
Hvis du ikke bruker WordPress eller annen CMS, kan du fortsatt legge inn et responsivt Google Map. Du trenger bare å bruke kode i stedet for en modul. Det krever litt mer arbeid, men vil levere de samme responsive kartene.
- Besøk Google Maps og naviger til kartet du vil vise fyller skjermen.
- Velg den blå delelinken og kopier koden fra Embed Map.
- Legg til den spesifikke innebygde koden i koden nedenfor mellom og.
- Legg til koden i HTML-koden til websiden din der du vil se kartet.
- Lagre endringene dine.
Koden:
Dette er ikke min kode, jeg fant den på nettet, men testet den ut på nettstedet mitt. Det fungerer som en sjarm og skal fungere enten du bruker en CMS, HTML, Hugo eller et av de mange andre nettstedsspråk eller sideverktøy.
