Com inserir Google Maps al lloc web: 4 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:12

Voteu-me al Maps Challenge!

Recentment, he creat un lloc web que utilitza Google Maps. Inserir Google Maps al meu lloc web era bastant fàcil i no era tan difícil de fer. En aquest manual d’instruccions, us mostraré el fàcil que és inserir Google Maps al vostre lloc web.

Per ser sincer amb vosaltres, acabo d'incorporar Google Maps al meu lloc web per diversió. No hi ha tantes coses a fer durant la quarantena, així que per què no fer un lloc web que utilitzi Google Maps i mostrar a la gent els passos que he fet mentre he creat aquest lloc web?

Ara he de dir que heu de saber alguna cosa sobre HTML i CSS per inserir Google Maps al vostre lloc web. Si no sabeu res sobre HTML o CSS, proveu d’anar a

Nota: No estic afiliat a W3Schools en cap forma o forma. És només un lloc web que he trobat útil per aprendre HTML i CSS.

Subministraments

• Editor de text (s'utilitzarà per personalitzar el vostre lloc web i proporcionar el contingut del vostre lloc web).
• Google Maps (què s’incorporaria al vostre lloc web).
• Comprensió bàsica d'HTML i CSS (aquests són els llenguatges de programació següents que s'utilitzarien per personalitzar el vostre lloc web i proporcionar contingut al vostre lloc web).

Pas 1: proporcioneu contingut al vostre lloc web

Aneu al programa d’edició de text de l’ordinador. Per exemple, com que tinc un Windows, hauria d’anar al Bloc de notes. Després d'anar al Bloc de notes, escriviu el següent:

Google Maps

Google Maps

Quan hàgiu acabat d'escriure el següent a Bloc de notes, aneu a Google Maps, on més endavant obtindreu el codi que podeu utilitzar per incrustar Google Maps al vostre lloc web.

Aquí teniu l’enllaç per anar a Google Maps:

Pas 2: Inseriu Google Maps al vostre lloc web

Quan estigueu a Google Maps, feu clic al botó "Menú" i, a continuació, cerqueu "Compartir o incrustar el mapa". Quan vegeu "Compartir o incrustar el mapa", feu-hi clic. Un cop hi hagueu fet clic, hauríeu de veure "Envia un enllaç" i "Insereix un mapa". Ara feu clic a "Insereix un mapa", un cop hàgiu fet clic a "Insereix un mapa", ara hauríeu de veure una fletxa cap avall a l'esquerra d'un quadre de text que s'utilitzarà per escollir el gran o petit que voleu que sigui el mapa. Copieu el text al quadre. I enganxeu el text a l'HTML del vostre lloc web.

Pas 3: personalitzeu el vostre lloc web

Torneu al programa d'edició de text de l'ordinador i escriviu el següent:

Cos de Google Maps {color de fons: rgb (129, 207, 224, 1);}

Google Maps

L’etiqueta d’estil s’utilitza per personalitzar el vostre lloc web. Ara, us aconsellaré que aquest pas utilitzi CSS. Podeu escriure el següent per tal que el vostre sembli exactament igual que el meu lloc web.

Un cop hàgiu acabat, deseu el fitxer com a "Google Maps.html". No oblideu la part html perquè, si no incloeu aquesta part, no podreu crear un lloc web.

Pas 4: mireu el producte final

Un cop hàgiu acabat de seguir tots els passos d’aquest manual d’instruccions, mireu bé el vostre producte final. Si esteu satisfet amb el vostre producte final, és fantàstic. Però, si no esteu satisfet amb el vostre producte final, torneu al vostre bloc de notes i intenteu arreglar-lo perquè la propera vegada que vegeu bé el vostre producte final estigueu satisfet del que heu creat amb les teves mans.

Si voleu veure el meu codi font, es pot trobar a la part inferior d’aquest manual d’instruccions. Gràcies per veure els meus Instructables i la meva codificació feliç.

Com a recordatori, voteu-me al Maps Challenge.