Sådan integreres Google Maps på webstedet: 4 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

Stem på mig i Maps Challenge!

For nylig har jeg oprettet et websted, der bruger Google Maps. At integrere Google Maps på mit websted var ret let og ikke så svært at gøre. I denne instruks vil jeg vise dig, hvor let det er at integrere Google Maps på dit websted.

For at være ærlig over for dig, har jeg bare integreret Google Maps på mit websted bare for sjov. Der er ikke så mange ting at gøre, mens du er i karantæne, så hvorfor ikke lave et websted, der bruger Google Maps, og derefter vise folk de trin, jeg har taget, da jeg oprettede dette websted.

Nu må jeg sige, du skal vide en eller to ting om HTML og CSS for at integrere Google Maps på dit websted. Hvis du ikke ved noget om HTML eller CSS, kan du prøve at gå til

Bemærk: Jeg er ikke tilknyttet W3Schools i nogen form eller form. Det er bare et websted, som jeg har fundet nyttig for at lære HTML og CSS.

Forbrugsvarer

• Teksteditor (bruges til at tilpasse dit websted og levere indholdet på dit websted).
• Google Maps (hvad der ville være integreret på dit websted).
• Grundlæggende forståelse af HTML og CSS (disse er følgende programmeringssprog, der ville blive brugt, når du tilpasser dit websted og leverer indhold på dit websted).

Trin 1: Giv indhold på dit websted

Gå til din tekstredigeringssoftware på din computer. For eksempel, da jeg har et Windows, skal jeg gå til Notesblok. Når du har gået til Notesblok, skriver du følgende:

Google kort

Google kort

Når du er færdig med at skrive følgende i Notesblok, skal du gå til Google Maps, hvor du senere vil få koden, som du kan bruge til at integrere Google Maps på dit websted.

Her er linket, hvor du kan gå til Google Maps:

Trin 2: Integrer Google Maps på dit websted

Når du er på Google Maps, skal du klikke på knappen "Menu" og derefter se efter "Del eller integrer kort". Når du ser "Del eller integrer kort", skal du klikke på det. Når du har klikket på det, skal du se "Send et link" og "Integrer et kort". Klik nu på "Integrer et kort", når du har klikket på "Integrer et kort", skal du nu se en pil ned til venstre for en tekstboks, som vil blive brugt til at vælge, hvor stort eller lille du vil have kortet til at være. Kopier teksten i boksen. Og indsæt teksten i HTML -koden på dit websted.

Trin 3: Tilpas dit websted

Gå tilbage til din tekstredigeringssoftware på din computer, og indtast følgende:

Google Maps-krop {baggrundsfarve: rgb (129, 207, 224, 1);}

Google kort

Stilmærket bruges til at tilpasse dit websted. Nu vil jeg rådgive dig om, at dette trin bruger CSS. Du kan indtaste følgende, så dit ligner min hjemmeside nøjagtigt.

Når du er færdig, skal du gemme din fil som "Google Maps.html". Glem ikke html -delen, for hvis du ikke inkluderer denne del, kan du ikke oprette et websted.

Trin 4: Se på dit endelige produkt

Når du er færdig med at følge alle trinene i denne instruks, kan du kigge godt på dit endelige produkt. Hvis du er tilfreds med dit endelige produkt, er det fantastisk. Men hvis du ikke er tilfreds med dit endelige produkt, skal du gå tilbage til din Notesblok og prøve at rette dit endelige produkt, så du næste gang, når du ser et godt produkt, bliver glad for det, du har skabt med dine hænder.

Hvis du ønsker at se min kildekode, kan den findes nederst i denne instruks. Tak fordi du så min Instructables og glad kodning!

Som en påmindelse kan du stemme på mig i Maps Challenge!