Google Maps är ett av de bästa verktygen som någonsin slår på nätet. Det har blivit det vanliga sättet för människor att få vägbeskrivningar online, visa satellitbilder och terrängbilder och utföra någon annan kartrelaterad uppgift.
Det finns flera anledningar att du vill bädda in en Google Map till din webbsida, oavsett om det är för funktionella ändamål, till exempel att vägleda användare till din fysiska plats eller estetiska ändamål, till exempel att använda karta för en bakgrundsbild. Idag ska vi titta på två sätt som du kan åstadkomma denna uppgift: det snabba och enkla sättet och den kraftfulla, flexibla API-rutten.
Bädda in en Google Map
Det första som vi lär oss att göra är en enkel och rak inbäddning av en Google-karta. Funktionen här är ganska begränsad men det är super lätt.
Det första du behöver göra är att helt enkelt gå till Google Maps som du skulle om du letade efter vägbeskrivningar. Skriv bara in adressen där du vill att kartan ska börja.
Klicka nu på den lilla länkikonen längst upp till höger på skärmen. Detta ska dyka upp ett litet fönster som innehåller en ren länk och ett HTML-kod, kopiera det andra till ditt urklipp och klistra in det i ett HTML-dokument.
HTML
Det är allt det finns! Detta borde ge dig en levande karta på din webbsida. Du kommer emellertid aldrig att klistra in i koden och göra det, men istället stile det för att passa dina behov.
För att göra det här, låt oss ta en titt på den råa koden som resulterar:
Nu kan det se ut som en stor röra men det är ganska lätt att sortera igenom. Länkarna är verkligen resultatet av all den otäcka koden, så låt oss slänga ut dem bara för exemplet. Nu ser koden mycket hanterbar ut.
Vi kan se några ganska grundläggande inline stil kontroller här. Till att börja med, försök att ändra storlek på kartan till 600px bred. Vi kan enkelt slå in det i en div och centrera det. Jag har också ändrat länkens färg nära slutet till vit.
Låt oss säga att vi ville ha lite roligare med det här. Låt oss gräva den sista länken helt och ställa in vår bredd för att sträcka hela vägen över sidan. Koden för detta är snäll och koncis.
Går fullskärm: Det snabba och smutsiga sättet
Tricket ovan är perfekt för att bädda in en levande karta till din kontaktsida, men låt oss säga att du ville göra kartan mer av en designfunktion än ett verktyg. Det är ganska lätt att använda samma teknik och sträcka kartan över hela skärmen.
HTML
För att komma igång, skapa två divs, en som håller något konstverk, text etc. och en annan för kartan. Jag kastade in någon grundläggande text för överlagringsdelen och klistrade in mina kartor i andra div. Lägg märke till att jag tog bort länkdelen i slutet av den inbäddade länken samt storlekarna längs början av länken.
Det är verkligen all den uppmärksamhet som vi behöver. Låt oss hoppa över till vår CSS för att få allt att se bra ut och få det att stapla rätt.
CSS
Det första du vill göra är att rikta in iframe i vår kart div och ställ den till höjd och bredd till 100%. Detta kommer att se till att vår karta sträcker sig över hela webbläsarfönstret.
Uppdatering: Det här fungerar i Safari men det visar sig att Firefox visar en div på 100% höjd är svårare än jag trodde. Kolla in den här artikeln för detaljer.
Därefter stilar vi överlägget. Nyckeln här är att ställa in placera egendom till absolut, som kommer att dra ut det från dokumentets normala flöde och sitta på toppen av kartan. Härifrån kan vi stila och flytta den på plats.
Jag ville ha en lätt transparent svart bar så jag använde RGBA inställd på 90% opacitet. Härifrån lägger jag till en viss marginal överst och ställer in teckensnitt för båda textkoderna med hjälp av CSS-stenografi.
Få kreativitet
Du kan behandla kartan som alla andra föremål på sidan, så experimentera med att ändra dess form, tillämpa effekter och allt annat du kan komma med!
API: erna för Google Maps
Vi har knappt repat ytan på vad du kan göra med Google Maps på din webbplats. I själva verket har Google en hel familj API som syftar till att hjälpa dig att strukturera, utforma och integrera mycket anpassade versioner av deras kartor.
Iframe-metoden ovan är rolig och enkel, men den bästa vägen att gå till inbäddning av kartor till din webbplats är förmodligen JavaScript-API. Med detta kan du bara skapa en div med ett visst ID:
Sedan hoppar du in i din JavaScript, ringer en funktion, ställer in några alternativ och lagrar dem i en variabel och skapar kartan med hjälp av ID från HTML ovan.
API: n ger dig en ton av alternativ för inställningar som zoomnivå och vilka kontroller som är synliga. Du kan även anpassa de små kartmarkörerna med dina egna bilder.
API-handledning
Om du vill komma igång med API-programmen för Google Maps, här är några länkar som du definitivt vill kolla in.
- Officiell Google JavaScript API Tutorial
- Wade Hammes: Ställ in en Google Map som bakgrund på din webbplats
Statiska kartor
Vill du inte ha en interaktiv karta? Kolla in dokumentationen för att lägga till en statisk karta.Många av funktionerna är desamma, resultatet är helt enkelt en icke-rörlig bild snarare än en riktig karta som användare kan spela med.
Slutsats
Sammanfattningsvis, om du vill ha en Google Map på din webbplats utan ansträngning följer du stegen ovan för att gå iframe-rutten. Din kontroll över kartan är begränsad men du kan ha mycket roligt med hur du bäddar in den på sidan. Om du behöver fler funktioner och flexibilitet, registrera dig för en gratis API-nyckel och gå JavaScript-rutten.
Lämna en kommentar nedan och visa oss vilka sidor du har skapat med Google Maps. Vilka tekniker och resurser har du hittat till hjälp?