Kuidas Google Mapsi veebisaidile kinnistada: 4 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

Hääletage Maps Challenge'is minu poolt!

Hiljuti lõin veebisaidi, mis kasutab Google Mapsi. Google Mapsi lisamine oma veebisaidile oli üsna lihtne ja mitte nii raske. Selles juhendis näitan teile, kui lihtne on Google Mapsi oma veebisaidile manustada.

Ausalt öeldes kinnistasin Google Mapsi lihtsalt oma lõbuks oma veebisaidile. Karantiini ajal pole nii palju asju teha, nii et miks mitte teha veebisait, mis kasutab Google Mapsi, ja siis näidata inimestele samme, mida olen selle veebisaidi loomisel teinud.

Nüüd pean ütlema, et Google Mapsi oma veebisaidile manustamiseks peate teadma HTML -i ja CSS -i kohta üht -teist. Kui te ei tea HTML -ist või CSS -ist midagi, proovige minna aadressile

Märkus. Ma ei ole mingil kujul ega vormis W3Schoolsiga seotud. See on lihtsalt veebisait, millest olen HTML -i ja CSS -i õppimisel abiks olnud.

Tarvikud

• Tekstiredaktor (kasutatakse teie veebisaidi kohandamiseks ja veebisaidi sisu pakkumiseks).
• Google Maps (mis lisatakse teie veebisaidile).
• HTML -i ja CSS -i põhiteadmised (need on järgmised programmeerimiskeeled, mida kasutatakse veebisaidi kohandamisel ja veebisaidi sisu pakkumisel).

Samm: esitage oma veebisaidile sisu

Minge oma arvutis oma tekstiredaktori tarkvara juurde. Näiteks kuna mul on Windows, peaksin minema Notepadi. Pärast Notepadi avamist tippige järgmine tekst:

Google kaardid

Google kaardid

Kui olete Notepadis järgmise teksti sisestamise lõpetanud, minge Google Mapsi, kust saate hiljem koodi, mida saate kasutada Google Mapsi veebisaidile manustamiseks.

Siin on link Google Mapsi avamiseks:

2. toiming: manustage Google Maps oma veebisaidile

Kui olete Google Mapsis, klõpsake nuppu "Menüü" ja seejärel otsige "Jaga või manusta kaarti". Kui näete valikut „Jaga või manusta kaarti”, klõpsake sellel. Kui olete sellel klõpsanud, peaksite nägema "Saada link" ja "Manusta kaart". Nüüd klõpsake "Embed a map", kui olete klõpsanud "Embed a map", peaksite nüüd nägema tekstiväljast vasakul allanoolt, mida kasutatakse kaardi suuruse või väikese valimiseks. Kopeerige kastis olev tekst. Ja kleepige tekst oma veebisaidi HTML -i.

Samm: kohandage oma veebisaiti

Minge tagasi oma arvuti tekstiredaktoritarkvara juurde ja tippige järgmine tekst:

Google Mapsi sisu {background-color: rgb (129, 207, 224, 1);}

Google kaardid

Stiilimärki kasutatakse teie veebisaidi kohandamiseks. Nüüd soovitan teile, et see samm kasutab CSS -i. Saate sisestada järgmise, et teie oma näeks välja täpselt nagu minu veebisait.

Kui olete lõpetanud, salvestage fail nimega „Google Maps.html”. Ärge unustage html -osa, sest kui te seda osa ei sisalda, ei saa te veebisaiti luua.

Samm: vaadake oma lõpptoodet

Kui olete kõik selles juhendis toodud juhised täitnud, vaadake oma lõpptoodet hästi. Kui olete oma lõpptootega rahul, on see suurepärane. Kuid kui te pole oma lõpptootega rahul, minge tagasi oma Notepadisse ja proovige oma lõpptoodet parandada, nii et järgmisel korral, kui vaatate oma lõpptoodet hästi, olete rahul sellega, mille olete loonud sinu käed.

Kui soovite vaadata minu lähtekoodi, leiate selle selle juhendi allservast. Täname, et vaatasite minu juhendeid ja head kodeerimist!

Tuletame meelde, et palun hääletage minu poolt Maps Challenge'is!