Cuprins:

Cum să încorporați Google Maps pe site: 4 pași
Cum să încorporați Google Maps pe site: 4 pași

Video: Cum să încorporați Google Maps pe site: 4 pași

Video: Cum să încorporați Google Maps pe site: 4 pași
Video: Ghidul complet al formularelor Google - Instrument de sondaj online și colectare de date! 2024, Noiembrie
Anonim
Cum se încorporează Google Maps pe site
Cum se încorporează Google Maps pe site

Votați pentru mine în Hărțile Provocării!

Recent, am creat un site web care utilizează Google Maps. Încorporarea Google Maps pe site-ul meu web a fost destul de ușor și nu atât de greu de făcut. În acest Instructables, vă voi arăta cât de ușor este să încorporați Google Maps pe site-ul dvs. web.

Pentru a fi sincer cu dvs., tocmai am încorporat Google Maps pe site-ul meu doar pentru distracție. Nu sunt atât de multe lucruri de făcut în timpul carantinei, așa că de ce să nu creezi un site web care utilizează Google Maps, apoi să arăți oamenilor pașii pe care i-am făcut în timp ce am creat acest site.

Acum trebuie să spun că trebuie să știți ceva sau două despre HTML și CSS pentru a încorpora Google Maps pe site-ul dvs. web. Dacă nu știți nimic despre HTML sau CSS, încercați să accesați

Notă: Nu sunt afiliat cu W3Schools sub nici o formă sau formă. Este doar un site web pe care l-am găsit util când învăț HTML și CSS.

Provizii

  • Editor de text (va fi utilizat pentru a vă personaliza site-ul și pentru a furniza conținutul de pe site-ul dvs.).
  • Google Maps (ce ar fi încorporat pe site-ul dvs.).
  • Înțelegerea de bază a HTML și CSS (acestea sunt următoarele limbaje de programare care ar fi utilizate la personalizarea site-ului dvs. web și la furnizarea de conținut pe site-ul dvs. web).

Pasul 1: furnizați conținut pe site-ul dvs. web

Furnizați conținut pe site-ul dvs. web
Furnizați conținut pe site-ul dvs. web
Furnizați conținut pe site-ul dvs. web
Furnizați conținut pe site-ul dvs. web

Accesați software-ul editorului de text de pe computer. De exemplu, deoarece am Windows, ar trebui să merg la Notepad. După ce accesați Notepad, introduceți următoarele:

Hărți Google

Hărți Google

După ce ați terminat de tastat în Notepad, accesați Google Maps, unde veți primi ulterior codul pe care îl veți folosi pentru a încorpora Google Maps pe site-ul dvs. web.

Iată linkul pentru a accesa Google Maps:

Pasul 2: încorporați Google Maps pe site-ul dvs. web

Încorporați Google Maps pe site-ul dvs. web
Încorporați Google Maps pe site-ul dvs. web
Încorporați Google Maps pe site-ul dvs. web
Încorporați Google Maps pe site-ul dvs. web
Încorporați Google Maps pe site-ul dvs. web
Încorporați Google Maps pe site-ul dvs. web

După ce vă aflați pe Google Maps, faceți clic pe butonul „Meniu” și apoi căutați „Distribuiți sau încorporați harta”. După ce vedeți „Distribuiți sau încorporați harta”, faceți clic pe ea. După ce ați făcut clic pe acesta, ar trebui să vedeți „Trimiteți un link” și „Încorporați o hartă”. Acum faceți clic pe „Încorporați o hartă”, după ce ați făcut clic pe „Încorporați o hartă”, ar trebui să vedeți acum o săgeată în jos în stânga unei casete de text care ar fi utilizată pentru a alege cât de mare sau mică doriți să fie harta. Copiați textul în casetă. Și lipiți textul în codul HTML al site-ului dvs. web.

Pasul 3: Personalizați-vă site-ul web

Personalizați-vă site-ul web
Personalizați-vă site-ul web
Personalizați-vă site-ul web
Personalizați-vă site-ul web

Reveniți la software-ul de editor de text de pe computer și introduceți următoarele:

Google Maps corp {fundal-culoare: rgb (129, 207, 224, 1);}

Hărți Google

Eticheta de stil este utilizată pentru a vă personaliza site-ul. Acum, vă voi sfătui că acest pas utilizează CSS. Puteți tasta următoarele, astfel încât al dvs. să arate exact ca site-ul meu web.

După ce ați terminat, salvați fișierul ca „Google Maps.html”. Nu uitați partea html deoarece, dacă nu includeți această parte, nu puteți crea un site web.

Pasul 4: Uită-te la produsul tău final

Uită-te la produsul tău final
Uită-te la produsul tău final

După ce ați terminat de parcurs toți pașii din acest manual, aruncați o privire bună asupra produsului dvs. final. Dacă sunteți mulțumit de produsul dvs. final, este minunat. Dar, dacă nu sunteți mulțumit de produsul dvs. final, reveniți în Notepad și încercați să remediați produsul final, astfel încât data viitoare când aruncați o privire bună asupra produsului dvs. final, veți fi mulțumit de ceea ce ați creat cu mainile tale.

Dacă doriți să vizualizați codul meu sursă, acesta poate fi găsit în partea de jos a acestui Instructables. Vă mulțumesc pentru vizualizarea Instructables și codificare fericită!

Ca reamintire, vă rog să mă votați în Maps Challenge!

Recomandat: