Kuinka upottaa Google Maps verkkosivustoon: 4 vaihetta

2025 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2025-01-23 14:41

Äänestä minua Maps Challenge -kilpailussa!

Olen äskettäin luonut verkkosivuston, joka käyttää Google Mapsia. Google Mapsin upottaminen verkkosivustolleni oli melko helppoa eikä vaikeaa. Tässä ohjeessa näytän sinulle, kuinka helppoa on upottaa Google Maps verkkosivustoosi.

Ollakseni rehellinen sinulle, upotin Google Mapsin verkkosivustolleni vain huvin vuoksi. Karanteenissa ei ole niin paljon tehtävää, joten miksi et tekisi Google Mapsia hyödyntävää verkkosivustoa ja näytä sitten ihmisille vaiheet, jotka olen tehnyt tämän sivuston luomisessa.

Nyt minun on sanottava, että sinun on tiedettävä yksi tai kaksi asiaa HTML: stä ja CSS: stä, jotta voit upottaa Google Mapsin verkkosivustollesi. Jos et tiedä mitään HTML: stä tai CSS: stä, siirry osoitteeseen

Huomautus: En ole sidoksissa W3Schoolsiin missään muodossa. Se on vain sivusto, jonka olen havainnut hyödylliseksi HTML- ja CSS -oppimisessa.

Tarvikkeet

• Tekstieditori (käytetään verkkosivustosi mukauttamiseen ja sivustosi sisällön toimittamiseen).
• Google Maps (mitä verkkosivustoosi upotetaan).
• HTML: n ja CSS: n perustiedot (nämä ovat seuraavat ohjelmointikielet, joita käytettäisiin verkkosivustosi muokkaamisessa ja sivustosi sisällön tarjoamisessa).

Vaihe 1: Tarjoa sisältöä verkkosivustollesi

Siirry tietokoneen tekstieditoriohjelmistoon. Esimerkiksi koska minulla on Windows, minun pitäisi mennä Notepadiin. Kun olet siirtynyt Muistioon, kirjoita seuraava:

Google Kartat

Google Kartat

Kun olet kirjoittanut seuraavat asiat Muistiossa, siirry Google Mapsiin, josta saat myöhemmin koodin, jonka avulla voit upottaa Google Mapsin verkkosivustollesi.

Tästä linkistä pääset Google Mapsiin:

Vaihe 2: Upota Google Maps verkkosivustoosi

Kun olet Google Mapsissa, napsauta Valikko -painiketta ja etsi sitten Jaa tai upota kartta. Kun näet "Jaa tai upota kartta", napsauta sitä. Kun olet napsauttanut sitä, sinun pitäisi nähdä "Lähetä linkki" ja "Upota kartta". Napsauta nyt "Upota kartta", kun olet napsauttanut "Upota kartta", sinun pitäisi nyt nähdä tekstin ruudun vasemmalla puolella oleva alanuoli, jota käytetään valitsemaan, kuinka suuri tai pieni haluat kartan olevan. Kopioi teksti ruutuun. Ja liitä teksti verkkosivustosi HTML -koodiin.

Vaihe 3: Muokkaa verkkosivustoasi

Palaa tietokoneen tekstieditoriohjelmistoon ja kirjoita seuraava:

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

Google Kartat

Tyylitunnistetta käytetään verkkosivustosi mukauttamiseen. Neuvon nyt, että tässä vaiheessa käytetään CSS: ää. Voit kirjoittaa seuraavan, jotta omasi näyttävät täsmälleen samalta kuin verkkosivustoni.

Kun olet valmis, tallenna tiedosto nimellä "Google Maps.html". Älä unohda html -osaa, koska jos et sisällytä tätä osaa, et voi tehdä verkkosivustoa.

Vaihe 4: Katso lopputuotettasi

Kun olet suorittanut kaikki tämän ohjeen vaiheet, katso lopputuotettasi. Jos olet tyytyväinen lopputuotteeseesi, se on hienoa. Mutta jos et ole tyytyväinen lopputuotteeseesi, palaa muistikirjaasi ja yritä korjata lopputuote niin, että seuraavalla kerralla, kun tarkastelet lopputuotettasi kerran, olet tyytyväinen siihen, mitä olet luonut kätesi.

Jos haluat tarkastella lähdekoodiani, se löytyy tämän ohjeen alareunasta. Kiitos, että katselit Instructables -ohjelmaa ja hyvää koodausta!

Muistutuksena, äänestäkää minua Maps Challengessa!