Anonim

Kort er et væsentligt aspekt af ethvert forretningswebsted. Selv hvis du er fuldstændigt internetbaseret, kan kunderne stadig gerne vide, hvem du er, og hvor du bor. Google Maps er nu standard for mange websteder, da det er den nemmeste at bruge, tilsyneladende den mest nøjagtige og er gratis. Ved afslutningen af ​​denne tutorial vil du vide nøjagtigt, hvordan du integrerer et responsivt Google Map på dit websted.

Standard Google Maps er ikke altid lydhøre, så de skaleres muligvis ikke til forskellige skærmstørrelser. Afhængigt af om du bruger et WordPress-plugin eller indlejrer det selv ved hjælp af kode, kan det være nødvendigt at tilføje et par linjer CSS for at gøre kortet lydhør.

Responsiv webdesign

Responsiv er et vigtigt udtryk her. Den beskriver webdesign, der tager hensyn til brugeroplevelsen og enheden for at sikre, at det er det samme, uanset hvilken enhed du bruger til at få adgang til webstedet. For eksempel skal et responsivt websted give den samme kvalitet af oplevelsen, uanset om du besøger det på et skrivebord, tablet eller smartphone.

For at gøre dette skal webstedet tilpasse sig forskellige opløsninger, skærmstørrelser og berøre.

Indlejring af et lydhørt Google Map på et websted

Der er tre måder jeg kender til at integrere Google Maps på et websted. Hvis du bruger et WordPress-tema, kan det have indbygget funktionen. Du kan også bruge et plugin, eller du kan integrere kode direkte fra Google på ethvert websted. Den første og anden indstilling er fantastisk til WordPress-brugere, andre CMS bruger også plugins, så du er dækket der. Den sidste mulighed, ved at bruge kode, skal fungere på de fleste websteder, uanset hvordan de er bygget.

Brug et WordPress-tema til at integrere et responsivt Google Map

Nogle WordPress-temaer har en funktion specielt til Google Maps. Da kort er sådan en grundlæggende for moderne websteder, har nogle temadesignere implementeret dem direkte i deres design. Hvis dit tema har en kortfunktion, har du sandsynligvis brug for en Google Maps API for at få det til at fungere. Du tilføjer API til temaindstillingerne, og det taler direkte med Google for at bygge kortet ved hvert besøg.

  1. Besøg denne side på Google-webstedet for at begynde API-processen.
  2. Vælg den blå Kom i gang-knappen.
  3. Vælg menulinie med tre linjer øverst til venstre på den nye skærm.
  4. Vælg API'er og tjenester og derefter legitimationsoplysninger.
  5. Vælg Opret legitimationsoplysninger og derefter API-nøgle.
  6. Vælg Begræns nøgle, og vælg HTTP-henvisere.
  7. Vælg Gem.
  8. Kopier API-nøglen og indsæt den på siden med designindstillinger, der kræver den.

Når du har API-nøglen, kan du implementere Google Map på dit websted ved hjælp af tema-designværktøjerne. Så længe temaet reagerer, skal kortet også være.

Brug en plugin til at integrere et responsivt Google Map

WordPress bruger plugins, Joomla bruger extensions, Drupal bruger moduler eller plugins og andre CMS bruger lignende navnekonventioner. Uanset hvad henviser plugins til modulære elementer, som du kan boltre på dit kerne CMS for at tilføje funktioner. En nyttig funktion er et Google Map. Hvis dit websteds tema ikke inkluderer et kortelement, og du ikke selv vil udføre koden, er et plugin det næste bedste.

  1. I WordPress skal du navigere til plugins og tilføje nyt.
  2. Søg efter Google Maps, og vælg et plugin, du kan lide udseendet af.
  3. Aktivér det i plugins og gå til dets indstillinger.
  4. Tilføj det Google Maps API, du oprettede ovenfor, hvor det er angivet, og Gem.
  5. Implementere plugin, uanset hvor du vil kortet skal vises.

Andre CMS adskiller sig lidt i navngivning og menupositioner, men princippet er stort set det samme. De fleste, hvis ikke alle, kort plugins kræver, at Google Maps API fungerer.

Brug kode til at integrere et responsivt Google Map

Hvis du ikke bruger WordPress eller anden CMS, kan du stadig integrere et lydhørt Google Map. Du skal bare bruge kode i stedet for et modul. Det kræver lidt mere arbejde, men vil levere de samme lydhør kort.

  1. Besøg Google Maps, og naviger, indtil det kort, du vil vise, udfylder skærmen.
  2. Vælg det blå Share-link, og kopier koden fra Embed Map.
  3. Føj din specifikke indlejringskode til koden herunder mellem og.
  4. Tilføj koden inden for HTML-koden på din webside, hvor du vil se kortet.
  5. Gem dine ændringer.

Koden:

Dette er ikke min kode, jeg fandt den online men testede den ud på min hjemmeside. Det fungerer som en charme og skal fungere, uanset om du bruger et CMS, HTML, Hugo eller et af de mange andre sprog på webstedet eller sideværktøjer.

Sådan integreres et lydhørt Google-kort på et websted