Toda página web, sobre todo empresarial, incluye entre sus datos de contacto un mapa con un marcador indicando dónde está ubicada la empresa.

Insertar un mapa de Google en una entrada o página de WordPress es muy sencillo.

Primero vamos a Google Maps para posicionar el marcador en la dirección deseada, por ejemplo en la Calle Méndez Núñez 10 de Granada.

https://www.gestionatuweb.net/wp-content/uploads/2016/09/001.jpg

Si queremos insertar este mapa (funcional) en la entrada de WordPress, sólo tenemos que pulsar en el menú de Google Maps:

Menú Google Maps

Y seleccionar Compartir o Insertar Mapa:

Compartir o insertar mapa

Se abrirá una ventana modal con opción de compartir el mapa en un enlace o la de insertar el mapa en una página. Seleccionamos insertar el mapa, y copiamos el código que nos proporcionan:

Copiar el código de GoogleMaps

Aquí el código:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3178.9538386650474!2d-3.6137609843172185!3d37.17756797987259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd71fc92a8f925ff%3A0x22830a5e492b95b1!2zQ2FsbGUgTcOpbmRleiBOw7rDsWV6LCAxMCwgMTgwMDMgR3JhbmFkYQ!5e0!3m2!1ses!2ses!4v1472711730435" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Para añadir el código en una página o entrada de WordPress, ponemos el editor en modo HTML:

https://www.gestionatuweb.net/wp-content/uploads/2016/09/005.jpg

O creamos un módulo de código HTML en el nuevo editor de bloques de WordPress y pegamos el código en el lugar deseado:

https://www.gestionatuweb.net/wp-content/uploads/2016/09/008.jpg

Y aquí vemos el resultado del mapa completamente funcional:

Podemos ajustar el tamaño del mapa cambiando los valores de Width y Height en el código. Si queremos que el mapa se ajuste al ancho de la página podemos especificar el width en el 100%.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3178.9538386650474!2d-3.6137609843172185!3d37.17756797987259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd71fc92a8f925ff%3A0x22830a5e492b95b1!2zQ2FsbGUgTcOpbmRleiBOw7rDsWV6LCAxMCwgMTgwMDMgR3JhbmFkYQ!5e0!3m2!1ses!2ses!4v1472711730435" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Toda página web, sobre todo empresarial, incluye entre sus datos de contacto un mapa con un marcador indicando dónde está ubicada la empresa.

Insertar un mapa de Google en una entrada o página de WordPress es muy sencillo.

Primero vamos a Google Maps para posicionar el marcador en la dirección deseada, por ejemplo en la Calle Méndez Núñez 10 de Granada.

Mapa de Google

Si queremos insertar este mapa (funcional) en la entrada de WordPress, sólo tenemos que pulsar en el menú de Google Maps:

Menú Google Maps

Y seleccionar Compartir o Insertar Mapa:

Compartir o insertar mapa

Se abrirá una ventana modal con opción de compartir el mapa en un enlace o la de insertar el mapa en una página. Seleccionamos insertar el mapa, y copiamos el código que nos proporcionan:

Copiar el código de GoogleMaps

Aquí el código:

Modo HTML

Para añadir el código en una página o entrada de WordPress, ponemos el editor en modo HTML  y pegamos el código en el lugar deseado:

Pegar el código de Google Maps

Y aquí vemos el resultado del mapa completamente funcional:

Podemos ajustar el tamaño del mapa cambiando los valores de Width y Height en el código. Si queremos que el mapa se ajuste al ancho de la página podemos especificar el width en el 100%.

<figure><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3178.9538386650474!2d-3.6137609843172185!3d37.17756797987259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd71fc92a8f925ff%3A0x22830a5e492b95b1!2zQ2FsbGUgTcOpbmRleiBOw7rDsWV6LCAxMCwgMTgwMDMgR3JhbmFkYQ!5e0!3m2!1ses!2ses!4v1472711730435" allowfullscreen="allowfullscreen" width="100%" height="450"></iframe></figure>

Si Google no encuentra la dirección especificada podemos posicionar el marcador por coordenadas:

Marcador por coordenadas

Para sacar las coordenadas basta con pinchar en cualquier parte del mapa, en la parte inferior Google determinará la posición dónde has pinchado junto con las coordenadas:

Coordenadas google Maps

Ahora para mejorar nuestro mapa de ubicación podemos añadir un pequeño formulario de «Cómo llegar», donde nuestro usuario pueda introducir su dirección, y Google le calcule la ruta hasta nuestra ubicación:

Para ello justo después del mapa podemos añadir el siguiente código:

<form action="https://maps.google.es/maps" method="get" target="_blank"><p style="text-align: left;">Cómo llegar desde: <input name="saddr" type="text" placeholder="Escriba su ubicación..." /><input name="daddr" type="hidden" value="Méndez Núñez, 10 Granada" /> <input class="button" type="submit" value="Calcular Ruta" /></p></form>

En el valor «daddr» sustituiremos: Méndez Núñez, 10 Granada, por nuestra dirección o coordenadas. Y aquí el resultado:

Cómo llegar desde: