Sisällysluettelo:
- Tarvikkeet
- Vaihe 1: Tarjoa sisältöä verkkosivustollesi
- Vaihe 2: Upota Google Maps verkkosivustoosi
- Vaihe 3: Muokkaa verkkosivustoasi
- Google Kartat
- Vaihe 4: Katso lopputuotettasi
![Kuinka upottaa Google Maps verkkosivustoon: 4 vaihetta Kuinka upottaa Google Maps verkkosivustoon: 4 vaihetta](https://i.howwhatproduce.com/images/007/image-19825-j.webp)
Video: Kuinka upottaa Google Maps verkkosivustoon: 4 vaihetta
![Video: Kuinka upottaa Google Maps verkkosivustoon: 4 vaihetta Video: Kuinka upottaa Google Maps verkkosivustoon: 4 vaihetta](https://i.ytimg.com/vi/LNw5OD7aCTM/hqdefault.jpg)
2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:00
![Kuinka upottaa Google Maps verkkosivustoon Kuinka upottaa Google Maps verkkosivustoon](https://i.howwhatproduce.com/images/007/image-19825-1-j.webp)
Ää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
![Tarjoa sisältöä verkkosivustollesi Tarjoa sisältöä verkkosivustollesi](https://i.howwhatproduce.com/images/007/image-19825-2-j.webp)
![Tarjoa sisältöä verkkosivustollesi Tarjoa sisältöä verkkosivustollesi](https://i.howwhatproduce.com/images/007/image-19825-3-j.webp)
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
![Upota Google Maps verkkosivustoosi Upota Google Maps verkkosivustoosi](https://i.howwhatproduce.com/images/007/image-19825-4-j.webp)
![Upota Google Maps verkkosivustoosi Upota Google Maps verkkosivustoosi](https://i.howwhatproduce.com/images/007/image-19825-5-j.webp)
![Upota Google Maps verkkosivustoosi Upota Google Maps verkkosivustoosi](https://i.howwhatproduce.com/images/007/image-19825-6-j.webp)
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
![Muokkaa verkkosivustoasi Muokkaa verkkosivustoasi](https://i.howwhatproduce.com/images/007/image-19825-7-j.webp)
![Muokkaa verkkosivustoasi Muokkaa verkkosivustoasi](https://i.howwhatproduce.com/images/007/image-19825-8-j.webp)
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
![Katso lopputuotettasi Katso lopputuotettasi](https://i.howwhatproduce.com/images/007/image-19825-9-j.webp)
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!
Suositeltava:
Kuinka tehdä langaton tinapurkkipuhelin! (Arduino Walkie Talkie): 7 vaihetta (kuvilla)
![Kuinka tehdä langaton tinapurkkipuhelin! (Arduino Walkie Talkie): 7 vaihetta (kuvilla) Kuinka tehdä langaton tinapurkkipuhelin! (Arduino Walkie Talkie): 7 vaihetta (kuvilla)](https://i.howwhatproduce.com/images/001/image-188-j.webp)
Kuinka tehdä langaton tinapurkkipuhelin! (Arduino Walkie Talkie): Juuri eilen olin keskellä erittäin tärkeää puhelua, kun banaanipuhelin lakkasi toimimasta! Olin niin turhautunut. Se on viimeinen kerta, kun jätän puhelun tyhmän puhelimen takia! (Jälkeenpäin ajateltuna olen saattanut olla hieman vihainen
Lisää Google Maps helposti Google -taulukoihisi automaattisesti ja ilmaiseksi: 6 vaihetta
![Lisää Google Maps helposti Google -taulukoihisi automaattisesti ja ilmaiseksi: 6 vaihetta Lisää Google Maps helposti Google -taulukoihisi automaattisesti ja ilmaiseksi: 6 vaihetta](https://i.howwhatproduce.com/images/007/image-20051-j.webp)
Lisää Google Maps helposti Google -taulukoihisi automaattisesti ja ilmaiseksi: Aivan kuten monet valmistajat, rakensin muutamia GPS -seurantaprojekteja. Nykyään voimme visualisoida GPS -pisteet nopeasti suoraan Google Sheetsissä ilman ulkoista verkkosivustoa tai sovellusliittymää. Mikä parasta, se on ILMAINEN
Kuinka lähettää kuvia Instagramiin tietokoneeltasi Google Chromen avulla: 9 vaihetta
![Kuinka lähettää kuvia Instagramiin tietokoneeltasi Google Chromen avulla: 9 vaihetta Kuinka lähettää kuvia Instagramiin tietokoneeltasi Google Chromen avulla: 9 vaihetta](https://i.howwhatproduce.com/images/002/image-5097-61-j.webp)
Kuinka lähettää kuvia Instagramiin tietokoneeltasi Google Chromen avulla: Instagram on yksi johtavista sosiaalisen median alustoista juuri nyt. Tätä alustaa käyttävät ihmiset voivat jakaa valokuvia ja lyhyitä videoita, jotka voidaan ladata Instagram -mobiilisovelluksella. Yksi suurimmista haasteista, joita Instagram -käyttäjät kohtaavat, on
Kuinka automatisoida huoneesi Google Assistantin ja Arduinon avulla?: 7 vaihetta
![Kuinka automatisoida huoneesi Google Assistantin ja Arduinon avulla?: 7 vaihetta Kuinka automatisoida huoneesi Google Assistantin ja Arduinon avulla?: 7 vaihetta](https://i.howwhatproduce.com/images/002/image-3177-46-j.webp)
Kuinka automatisoida huoneesi Google Assistantin ja Arduinon kanssa? tukevat laitteiden puheohjausta, koska
Kuinka muuntaa Google- tai Youtube -videot melkein mihin tahansa muuhun mediamuotoon ilmaiseksi: 7 vaihetta
![Kuinka muuntaa Google- tai Youtube -videot melkein mihin tahansa muuhun mediamuotoon ilmaiseksi: 7 vaihetta Kuinka muuntaa Google- tai Youtube -videot melkein mihin tahansa muuhun mediamuotoon ilmaiseksi: 7 vaihetta](https://i.howwhatproduce.com/images/002/image-5261-62-j.webp)
Kuinka muuntaa Google- tai Youtube -videot melkein mihin tahansa muuhun mediamuotoon ilmaiseksi: Tässä ohjeessa näytän sinulle, kuinka voit ladata videosisältöä useilta sivustoilta (youtube, Google Video jne.) Ja muuntaa sen kahdella tavalla moniin muihin muotoihin ja koodekit. Toinen käyttötarkoitus on ladata musiikkivideoita ja muuntaa ne mp3 -tiedostoiksi