Kartor är en väsentlig aspekt av varje företagswebbplats. Även om du är helt internetbaserad vill kunder fortfarande veta vem du är och var du bor. Google Maps är nu standard för många webbplatser eftersom det är det enklaste att använda, till synes det mest exakta och är gratis. I slutet av denna tutorial vet du exakt hur du bäddar in en responsiv Google Map på din webbplats.
Standardkartor för Google Maps är inte alltid lyhörda så det kan hända att de inte skalas till olika skärmstorlekar. Beroende på om du använder ett WordPress-plugin eller bäddar in det själv med hjälp av kod, kan det hända att du behöver lägga till ett par rader med CSS för att göra kartan lyhörd.
Responsiv webbdesign
Responsiv är en nyckelbegrepp här. Den beskriver webbdesign som tar hänsyn till användarupplevelsen och enheten för att säkerställa att den är densamma oavsett vilken enhet du använder för att komma åt webbplatsen. Till exempel bör en responsiv webbplats ge samma upplevelsekvalitet oavsett om du besöker den på ett skrivbord, surfplatta eller smartphone.
För att göra detta måste webbplatsen anpassa sig till olika upplösningar, skärmstorlekar och beröra dem.
Bädda in en responsiv Google Map på en webbplats
Det finns tre sätt jag känner till för att bädda in Google Maps på en webbplats. Om du använder ett WordPress-tema kan det ha funktionen inbyggd. Du kan också använda ett plugin eller så kan du bädda in kod direkt från Google på vilken webbplats som helst. Det första och andra alternativet är bra för WordPress-användare, andra CMS använder plugins också så att du är täckt där. Det sista alternativet att använda kod bör fungera på de flesta webbplatser oavsett hur de är byggda.
Använd ett WordPress-tema för att bädda in en responsiv Google Map
Vissa WordPress-teman har en funktion specifikt för Google Maps. Eftersom kartor är så grundläggande för moderna webbplatser, har vissa temadesigners implementerat dem direkt i sina mönster. Om ditt tema har en kartfunktion behöver du troligen en Google Maps API för att få det att fungera. Du lägger till API: et i temalternativen och det kommer att prata direkt med Google för att bygga kartan vid varje besök.
- Besök den här sidan på Googles webbplats för att påbörja API-processen.
- Välj den blå knappen Kom igång.
- Välj menyraikonen för tre linjer längst upp till vänster på den nya skärmen.
- Välj API och tjänster och sedan Intyg.
- Välj Skapa referenser och sedan API-nyckel.
- Välj Begränsningsnyckel och välj HTTP-referenser.
- Välj Spara.
- Kopiera API-nyckeln och klistra in den på sidan med designalternativ som kräver det.
När du har API-nyckeln kan du implementera Google Map på din webbplats med temadesignverktygen. Så länge temat är lyhört bör kartan vara för.
Använd en plugin för att bädda in en responsiv Google Map
WordPress använder plugins, Joomla använder Extensions, Drupal använder moduler eller plugins och andra CMS använder liknande namnkonventioner. Hursomhelst hänvisar plugins till modulelement som du kan bulta på din core CMS för att lägga till funktioner. En användbar funktion är en Google Map. Om ditt webbplatstema inte innehåller ett kartelement och du inte vill göra koden själv, är ett plugin näst bästa.
- I WordPress navigerar du till Plugins och Lägg till nytt.
- Sök efter Google Maps och välj ett plugin du gillar utseendet på.
- Aktivera det i plugins och gå till dess inställningar.
- Lägg till Google Maps API som du skapade ovan där det anges och Spara.
- Implementera pluginprogrammet vart du vill att kartan ska visas.
Andra CMS skiljer sig något i namngivning och menypositioner men principen är ungefär densamma. De flesta, om inte alla, kartplugins kräver att Google Maps API fungerar.
Använd kod för att bädda in en responsiv Google Map
Om du inte använder WordPress eller annat CMS kan du fortfarande bädda in en responsiv Google Map. Du behöver bara använda kod istället för en modul. Det kräver lite mer arbete men kommer att leverera samma känsliga kartor.
- Besök Google Maps och navigera tills kartan du vill visa fyller skärmen.
- Välj den blå delningslänken och kopiera koden från Bädda in kartan.
- Lägg till din specifika inbäddningskod i koden nedan mellan och.
- Lägg till koden i HTML-koden på din webbsida där du vill se kartan.
- Spara dina ändringar.
Koden:
Det här är inte min kod, jag hittade den online men testade den på min webbplats. Det fungerar som en charm och bör fungera oavsett om du använder ett CMS, HTML, Hugo eller ett av de många andra webbplatsspråk eller sidverktyg.
