Saltar al contenido

Cómo insertar y mostrar Google Maps en un sitio web

14 febrero 2020
Cómo insertar y mostrar GOOGLE MAPS en un sitio web

¿Te ha pasado que quieres insertar Google Maps en un sitio web y no sabes cómo? No te preocupes, es un proceso fácil y rápido que acá aprenderás a desarrollar.

Es muy común, que al postear una información que incluye una dirección, saltemos a buscarla de forma manual en el Google Maps, lo que a veces genera confusiones o equivocaciones.

A quién no le ha pasado que buscó la dirección de forma incorrecta y terminó en el sitio equivocado. Pues, eso ya no será un problema. Con este paso a paso podrás insertar y mostrar el Google Maps con la dirección que deseas en tu web.

De ahora en adelante no será un inconveniente mostrarles a los visitantes de tu sitio dónde queda ese nuevo parque que visitaste y te encantó. O tal vez posees una empresa y deseas que figure tu dirección para que todos puedan visitarte.

El uso lo eliges tú. Nosotros nos encargamos de mostrarte la mejor manera de generar, insertar y mostrar el mapa que necesitas en tu web.

Cómo insertar y mostrar GOOGLE MAPS en un sitio web

Generar el mapa de Google Maps

Para poder insertar Google Maps en un sitio web, por ejemplo, en plataformas como WordPress, debemos buscar dentro del Maps la dirección que queremos se muestre en primera instancia en nuestra página.

Al tener ubicada la dirección, pasamos a seleccionar la opción “Compartir” en la que visualizaremos dos pestañas. Elegiremos la que se ajusta a nuestro deseo “Incorporar un mapa”.

Al estar en esta pestaña, tendremos una vista previa del mapa con la dirección que buscamos resaltada.

Podrás darte cuenta, que el mapa es editable, es decir, puedes mover el punto focal hacía el lado que desees que se perciba. De esa manera se verá luego de insertarlo en nuestra web.

También, tendrás la oportunidad de decidir entre distintos tamaños de mapa, para que selecciones el que mejor te funcione. Inclusive puedes elegir el tamaño personalizado, en el que debes ingresas los valores.

Al tener el mapa como deseamos, pasaremos a copiar la información que encontraremos en la parte inferior de la ventana. Este es el código individual del mapa.

Como insertar el mapa de Google Maps

Al tener el código del mapa comenzaremos a insertar Google Maps en un sitio web. En este caso, te mostraremos paso a paso como hacerlo en WordPress, aunque es muy parecido en otros gestores de contenido (CMS).

Iremos al post donde queremos tener el mapa, en la parte de edición. En la parte superior nos dirigimos al modo “HTML”.

Cómo insertar y mostrar GOOGLE MAPS en un sitio web

En esta opción, pegaremos la dirección que hemos extraído del mapa. Justo en el lugar donde queremos que se vea el mapa.

Ya luego de esto, si regresamos al modo “Visual”, se notará dónde hemos insertado el mapa. No olvides guardar el post.

Y listo, el mapa está correctamente incluido en nuestra publicación. Lo mejor es que este es un mapa interactivo, que incluye todas las opciones del propio Maps.

Generar un mapa sin CMS

En caso de querer generar un mapa que no será usado en webs con manejadores de contenido, el proceso es un poco menos directo.

Debemos crear una carpeta, en la que fundaremos un “Documento de texto” (.txt) con el nombre que se desee.

A continuación, abriremos el .txt con el “Editor de código” de preferencia. Se debe generar un HTML5, seguido de un HTLM2.5.

En el resultado de esto, colocaremos en el “Body” o cuerpo el código del mapa. Y le damos a “Guardar”.

Al abrir este documento en un navegador, veremos el mapa totalmente interactivo y en una pestaña individual.

Esto podremos insertarlo o compartirlo donde deseemos y siempre que sea ejecutado en un navegador, nos mostrará el mapa con la dirección y las características que ya hemos configurado.