Bädda in Google Maps på webbplatsen: 4 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:40

Rösta på mig i Maps Challenge!

Nyligen har jag skapat en webbplats som använder Google Maps. Att bädda in Google Maps på min webbplats var ganska enkelt och inte så svårt att göra. I denna instruktion kommer jag att visa dig hur enkelt det är att bädda in Google Maps på din webbplats.

För att vara ärlig mot dig, har jag bara inbäddat Google Maps på min webbplats bara för skojs skull. Det finns inte så mycket att göra när du är i karantän, så varför inte skapa en webbplats som använder Google Maps och sedan visa människor de steg som jag har tagit när jag skapade den här webbplatsen.

Nu måste jag säga, du måste kunna en sak eller två om HTML och CSS för att kunna bädda in Google Maps på din webbplats. Om du inte vet något om HTML eller CSS, försök att gå till

Obs! Jag är inte ansluten till W3Schools i någon form eller form. Det är bara en webbplats som jag har funnit vara till hjälp när jag lär mig HTML och CSS.

Tillbehör

• Textredigerare (kommer att användas för att anpassa din webbplats och tillhandahålla innehållet på din webbplats).
• Google Maps (vad som skulle vara inbäddat på din webbplats).
• Grundläggande förståelse för HTML och CSS (dessa är följande programmeringsspråk som skulle användas när du anpassar din webbplats och tillhandahåller innehåll på din webbplats).

Steg 1: Ge innehåll på din webbplats

Gå till ditt textredigeringsprogram på din dator. Till exempel, eftersom jag har ett Windows, borde jag gå till Anteckningar. När du har gått till Anteckningar skriver du följande:

Google kartor

Google kartor

När du har skrivit in följande i Anteckningar går du till Google Maps där du senare skulle få koden som du kan använda för att bädda in Google Maps på din webbplats.

Här är länken för dig att gå till Google Maps:

Steg 2: Bädda in Google Maps på din webbplats

När du är på Google Maps klickar du på knappen "Meny" och letar efter "Dela eller bädda in karta". När du ser "Dela eller bädda in karta", klicka på den. När du har klickat på det ska du se "Skicka en länk" och "Bädda in en karta". Klicka nu på "Bädda in en karta", när du har klickat på "Bädda in en karta" ska du nu se en nedåtpilen till vänster om en textruta som skulle användas för att välja hur stor eller liten du vill att kartan ska vara. Kopiera texten i rutan. Och klistra in texten i HTML -koden på din webbplats.

Steg 3: Anpassa din webbplats

Gå tillbaka till ditt textredigeringsprogram på din dator och skriv in följande:

Google Maps-kropp {bakgrundsfärg: rgb (129, 207, 224, 1);}

Google kartor

Stiltaggen används för att anpassa din webbplats. Nu kommer jag att informera dig om att detta steg använder CSS. Du kan skriva in följande så att din ser ut exakt som min webbplats.

När du är klar sparar du filen som "Google Maps.html". Glöm inte html -delen, för om du inte inkluderar den här delen kan du inte skapa en webbplats.

Steg 4: Titta på din slutprodukt

När du är klar med att följa alla stegen i denna instruktionsbok, ta en titt på din slutprodukt. Om du är nöjd med din slutprodukt är det bra. Men om du inte är nöjd med din slutprodukt, gå tillbaka till din anteckningsblock och försök fixa din slutprodukt så att nästa gång du tar en bra titt på din slutprodukt blir du nöjd med vad du har skapat med dina händer.

Om du vill se min källkod finns den längst ner i denna instruktionsbok. Tack för att du tittade på mina instruktioner och glad kodning!

Som en påminnelse, rösta på mig i Maps Challenge!