INHOUDSOPGAWE:

Hoe om Google Maps op die webwerf in te sluit: 4 stappe
Hoe om Google Maps op die webwerf in te sluit: 4 stappe

Video: Hoe om Google Maps op die webwerf in te sluit: 4 stappe

Video: Hoe om Google Maps op die webwerf in te sluit: 4 stappe
Video: Правила работы с микроскопом / Как настроить / Инструкция 2024, November
Anonim
Hoe om Google Maps op die webwerf in te sluit
Hoe om Google Maps op die webwerf in te sluit

Stem vir my in die Maps Challenge!

Onlangs het ek 'n webwerf geskep wat gebruik maak van Google Maps. Dit was redelik maklik om Google Maps op my webwerf in te sluit en nie so moeilik nie. In hierdie instruksies sal ek u wys hoe maklik dit is om Google Maps op u webwerf in te sluit.

Om eerlik te wees, het ek Google Maps net vir my plesier op my webwerf ingebed. Daar is nie soveel dinge om te doen tydens kwarantyn nie, so hoekom maak u nie 'n webwerf wat gebruik maak van Google Maps nie, en wys dan die stappe wat ek geneem het tydens die skep van hierdie webwerf.

Nou moet ek sê, u moet iets of twee weet oor HTML en CSS om Google Maps op u webwerf in te sluit. As u niks weet van HTML of CSS nie, gaan dan na

Nota: ek is nie in enige vorm of vorm verbonde aan W3Schools nie. Dit is net 'n webwerf wat ek nuttig gevind het om HTML en CSS te leer.

Voorrade

  • Teksredakteur (word gebruik om u webwerf aan te pas en die inhoud op u webwerf te verskaf).
  • Google Maps (wat op u webwerf ingebed sou wees).
  • Basiese begrip van HTML en CSS (dit is die volgende programmeertale wat gebruik sal word by die aanpassing van u webwerf en die verskaffing van inhoud op u webwerf).

Stap 1: Gee inhoud op u webwerf

Gee inhoud op u webwerf
Gee inhoud op u webwerf
Gee inhoud op u webwerf
Gee inhoud op u webwerf

Gaan na u teksredakteursagteware op u rekenaar. Aangesien ek byvoorbeeld 'n Windows het, moet ek na Notepad gaan. Nadat u na Notepad gegaan het, tik die volgende in:

Google kaarte

Google kaarte

Nadat u die volgende in Notepad ingetik het, gaan na Google Maps, waarna u later die kode kan kry om Google Maps op u webwerf in te sluit.

Hier is die skakel om na Google Maps te gaan:

Stap 2: Bed Google Maps op u webwerf in

Voeg Google Maps op u webwerf in
Voeg Google Maps op u webwerf in
Voeg Google Maps op u webwerf in
Voeg Google Maps op u webwerf in
Voeg Google Maps op u webwerf in
Voeg Google Maps op u webwerf in

Sodra u op Google Maps is, klik op die 'Menu' -knoppie en soek dan 'Deel of insluit kaart'. Sodra u 'Deel of insluit kaart' sien, klik daarop. Nadat u daarop geklik het, moet u 'Stuur 'n skakel' en '' 'n Kaart insluit '' sien. Klik nou op "Embed a map", nadat u op "Embed a map" geklik het, moet u nou 'n pyltjie na links van 'n tekskassie sien wat gebruik kan word om te kies hoe groot of klein u die kaart wil hê. Kopieer die teks in die blokkie. En plak die teks in die HTML van u webwerf.

Stap 3: Pas u webwerf aan

Pas u webwerf aan
Pas u webwerf aan
Pas u webwerf aan
Pas u webwerf aan

Gaan terug na u teksredakteursagteware op u rekenaar en tik die volgende in:

Google Maps-liggaam {agtergrond-kleur: rgb (129, 207, 224, 1);}

Google kaarte

Die styletiket word gebruik om u webwerf aan te pas. Nou sal ek u adviseer dat hierdie stap CSS gebruik. U kan die volgende tik, sodat die uwe presies soos my webwerf lyk.

As u klaar is, stoor u lêer as 'Google Maps.html'. Moenie die html -gedeelte vergeet nie, want as u hierdie deel nie insluit nie, kan u nie 'n webwerf maak nie.

Stap 4: Kyk na u finale produk

Kyk na u finale produk
Kyk na u finale produk

As u klaar is met al die stappe in hierdie instruksies, kyk u eers na u finale produk. As u tevrede is met u finale produk, is dit wonderlik. Maar as u nie tevrede is met u finale produk nie, gaan dan terug na u Notepad en probeer u finale produk regmaak, sodat u die volgende keer 'n goeie blik op u finale produk sal hê, waarmee u tevrede sal wees. jou hande.

As u my bronkode wil sien, kan u dit onderaan hierdie instruksies vind. Dankie dat u my instruksies gekyk het en dat u baie gelukkig is!

As 'n herinnering, stem asseblief vir my in die Maps Challenge!

Aanbeveel: