Cómo insertar Google Maps en un sitio web: 4 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

¡Vota por mí en el Desafío de Maps!

Recientemente, he creado un sitio web que utiliza Google Maps. Incrustar Google Maps en mi sitio web fue bastante fácil y no tan difícil de hacer. En este Instructables, le mostraré lo fácil que es insertar Google Maps en su sitio web.

Para ser honesto contigo, simplemente inserté Google Maps en mi sitio web solo por diversión. No hay muchas cosas que hacer mientras estoy en cuarentena, así que ¿por qué no crear un sitio web que utilice Google Maps y luego mostrarle a la gente los pasos que he tomado al crear este sitio web?

Ahora debo decir que debe saber un par de cosas sobre HTML y CSS para poder incrustar Google Maps en su sitio web. Si no sabe nada sobre HTML o CSS, intente ir a

Nota: No estoy afiliado a W3Schools de ninguna forma. Es solo un sitio web que me ha resultado útil para aprender HTML y CSS.

Suministros

• Editor de texto (se utilizará para personalizar su sitio web y proporcionar el contenido en su sitio web).
• Google Maps (lo que estaría incrustado en su sitio web).
• Comprensión básica de HTML y CSS (estos son los siguientes lenguajes de programación que se utilizarían al personalizar su sitio web y proporcionar contenido en su sitio web).

Paso 1: proporcione contenido en su sitio web

Vaya a su software de edición de texto en su computadora. Por ejemplo, dado que tengo Windows, debería ir al Bloc de notas. Después de ir al Bloc de notas, escriba lo siguiente:

mapas de Google

mapas de Google

Una vez que haya terminado de escribir lo siguiente en el Bloc de notas, vaya a Google Maps, donde más tarde obtendrá el código que usará para incrustar Google Maps en su sitio web.

Aquí está el enlace para ir a Google Maps:

Paso 2: inserte Google Maps en su sitio web

Una vez que esté en Google Maps, haga clic en el botón "Menú" y luego busque "Compartir o incrustar mapa". Una vez que vea "Compartir o incrustar mapa", haga clic en él. Una vez que haya hecho clic en eso, debería ver "Enviar un enlace" e "Insertar un mapa". Ahora haga clic en "Insertar un mapa", una vez que haya hecho clic en "Insertar un mapa", ahora debería ver una flecha hacia abajo a la izquierda de un cuadro de texto que se utilizaría para elegir qué tan grande o pequeño desea que sea el mapa. Copie el texto del cuadro. Y pegue el texto en el HTML de su sitio web.

Paso 3: personalice su sitio web

Regrese a su software de edición de texto en su computadora y escriba lo siguiente:

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

mapas de Google

La etiqueta de estilo se utiliza para personalizar su sitio web. Ahora, le advertiré que este paso utiliza CSS. Puede escribir lo siguiente para que el suyo se vea exactamente como mi sitio web.

Una vez que haya terminado, guarde su archivo como "Google Maps.html". No olvide la parte html porque si no incluye esta parte, no podrá crear un sitio web.

Paso 4: mira tu producto final

Una vez que haya terminado de seguir todos los pasos en este Instructables, eche un vistazo a su producto final. Si está satisfecho con su producto final, es genial. Pero, si no está satisfecho con su producto final, vuelva a su Bloc de notas e intente arreglar su producto final para que la próxima vez que eche un buen vistazo a su producto final, esté contento con lo que ha creado con tus manos.

Si desea ver mi código fuente, puede encontrarlo en la parte inferior de este Instructables. ¡Gracias por ver mis Instructables y feliz codificación!

Te recordamos que vota por mí en el Desafío de Maps.