Hoe u Google Maps op de website kunt insluiten: 4 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:15

Stem op mij in de Maps Challenge!

Onlangs heb ik een website gemaakt die gebruik maakt van Google Maps. Het insluiten van Google Maps op mijn website was vrij eenvoudig en niet zo moeilijk om te doen. In deze Instructables laat ik je zien hoe gemakkelijk het is om Google Maps in te sluiten op je website.

Om eerlijk te zijn, heb ik gewoon voor de lol Google Maps in mijn website ingesloten. Er is niet zoveel te doen in quarantaine, dus waarom zou u geen website maken die gebruikmaakt van Google Maps en mensen de stappen laten zien die ik heb genomen bij het maken van deze website.

Nu moet ik zeggen dat u het een en ander moet weten over HTML en CSS om Google Maps op uw website te kunnen insluiten. Als je niets weet over HTML of CSS, ga dan naar

Opmerking: ik ben op geen enkele manier aangesloten bij W3Schools. Het is gewoon een website die ik nuttig heb gevonden bij het leren van HTML en CSS.

Benodigdheden

• Teksteditor (wordt gebruikt om uw website aan te passen en de inhoud op uw website aan te bieden).
• Google Maps (wat zou worden ingesloten op uw website).
• Basiskennis van HTML en CSS (dit zijn de volgende programmeertalen die zouden worden gebruikt bij het aanpassen van uw website en het aanbieden van inhoud op uw website).

Stap 1: Zorg voor inhoud op uw website

Ga naar uw teksteditorsoftware op uw computer. Omdat ik bijvoorbeeld een Windows heb, zou ik naar Kladblok moeten gaan. Nadat u naar Kladblok bent gegaan, typt u het volgende:

Google Maps

Google Maps

Nadat u klaar bent met het typen van het volgende in Kladblok, gaat u naar Google Maps waar u later de code krijgt die u kunt gebruiken om Google Maps op uw website in te sluiten.

Hier is de link om naar Google Maps te gaan:

Stap 2: Google Maps insluiten op uw website

Als u eenmaal op Google Maps bent, klikt u op de knop "Menu" en zoekt u vervolgens naar "Kaart delen of insluiten". Zodra u "Kaart delen of insluiten" ziet, klikt u erop. Als je daarop hebt geklikt, zou je "Stuur een link" en "Een kaart insluiten" moeten zien. Klik nu op "Een kaart insluiten", zodra u op "Een kaart insluiten" hebt geklikt, ziet u nu een pijl naar beneden links van een tekstvak dat zou worden gebruikt om te kiezen hoe groot of klein u de kaart wilt hebben. Kopieer de tekst in het vak. En plak de tekst in de HTML van je website.

Stap 3: Pas uw website aan

Ga terug naar uw teksteditorsoftware op uw computer en typ het volgende in:

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

Google Maps

De stijltag wordt gebruikt om uw website aan te passen. Nu zal ik u adviseren dat deze stap CSS gebruikt. U kunt het volgende typen zodat de uwe er precies zo uitziet als mijn website.

Als u klaar bent, slaat u uw bestand op als "Google Maps.html". Vergeet het html-gedeelte niet, want als u dit niet opneemt, kunt u geen website maken.

Stap 4: Kijk naar uw eindproduct

Als je klaar bent met het volgen van alle stappen in deze Instructables, kijk dan eens goed naar je eindproduct. Als u tevreden bent met uw eindproduct, is dat geweldig. Maar als je niet tevreden bent met je eindproduct, ga dan terug naar je Kladblok en probeer je eindproduct te repareren, zodat je de volgende keer dat je goed naar je eindproduct kijkt, blij zult zijn met wat je hebt gemaakt met jouw handen.

Als u mijn broncode wilt bekijken, vindt u deze onderaan deze Instructables. Bedankt voor het bekijken van mijn Instructables en gelukkig coderen!

Ter herinnering: stem op mij in de Maps Challenge!