• Saltar a la navegación principal
  • Saltar al contenido principal

Dani Sánchez - Gestionatuweb

Desarrollador web freelance

  • Quién soy
  • ¿Eres agencia?
  • WordPress
    • Mantenimiento WordPress
    • Desarrollo WordPress
    • Soporte técnico WordPress
  • Cursos
  • Blog
  • Portfolio
  • Solicita Presupuesto
Mapa de Google

Insertar un mapa de Google para indicar una ubicación y cómo llegar

El 1 de septiembre de 2016 por dani 3 comentarios

Aviso: Esta entrada tiene 2 o más años, es posible que el método difiera ligeramente, las capturas de pantalla no se correspondan con la versión actual o que la herramienta/complemento ya no esté disponible.
Advertencia: Esta entrada contiene códigos o snippets que podrían no funcionar correctamente en tu instalación de WordPress, o podrían ser incompatibles con tu theme o plugins activos. Úsalos bajo tu responsabilidad, preferiblemente en un entorno de desarrollo y haz siempre copias de tus archivos antes de modificarlos.

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 (en caso de que estemos usando el editor clásico de WordPRess):

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

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

https://www.gestionatuweb.net/wp-content/uploads/2016/09/008-1.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>

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:

Archivado en: Publicaciones, Tutoriales, WordPress Etiquetado como: tutoriales, wordpress

Interacciones con los lectores

Comentarios

  1. JM dice

    30 de marzo de 2021 a las 16:23

    Cómo podríamos hacer para incluir en el mapa diferentes ubicaciones?? Cuál sería el código html??
    Se agradece su ayuda.
    Saludos de un principiante.

    Responder
  2. Carlos dice

    9 de noviembre de 2019 a las 20:21

    Hola, tengo una duda, he utilizado tu código para incorporar un cómo llegar a mi web pero cuando le doy al botón me aparece un mensaje como en tu página que dice lo siguiente «La información que ha introducido en esta página se enviará a través de una conexión no segura y podría ser leída por terceros.¿Está seguro de que quiere enviar esta información?» Me puedes decir como evitar ese mensaje?? Muchas gracias.

    Responder
    • Daniel, Gestionatuweb.net dice

      10 de noviembre de 2019 a las 12:38

      Hola Carlos, prueba a cambiar la URL de google maps por: https://maps.google.es/maps

      Cuando redacté el artículo aún se solía utilizar el protocolo clásico HTTP, en lugar del seguro HTTPS.

      Saludos.

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la política de privacidad

Hosting recomendado

Raiola Networks

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. dani en Publicar en WordPress desde un formulario externo con Advanced Custom Fields
  2. Mikel en Publicar en WordPress desde un formulario externo con Advanced Custom Fields
  3. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  4. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  5. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks
Banner

Sitios web corporativos, blogs y tiendas online cuidando hasta el mínimo detalle

Si deseas proponerme un proyecto web ponte en contacto conmigo.

Contacto

Gestionatuweb © 2022 · Desarrollado con Genesis · Acceder
Política de privacidad · Política de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde a tus gustos. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias. Más información sobre las cookies que utilizamos en nuestra: Política de cookies.

Gestor de cookies:  GDPR Cookie Compliance
Resumen de uso de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde con tus intereses. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias.

Cookies técnicas (necesarias)

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Estas cookies son:

  • moove_gdpr_popup: Comprueba si debe mostrar o no el aviso de cookies (si ya ha sido aceptado o rechazado no se vuelve a mostrar mientras persista esta cookie). Expira en 1 año.
  • cpnb_cookiesSettings: Comprueba qué categorías de cookies se aceptan o rechazan (por ejemplo, cookies analíticas, cookies de publicidad dirigida, etc.). Expira en 1 año.
  • _GRECAPTCHA: Esta web utiliza el servicio reCAPTCHA para fortalecer la seguridad en los formularios y evitar el envío masivo de SPAM. reCAPTCHA utiliza esta cookie necesaria para realizar su análisis de riesgo. Expira en 6 meses.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de analítica

Utilizamos Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares. Dejando estas cookies activas nos permite mejorar nuestra web.

  • _ga: Analítica de Google. Se usa para distinguir a los usuarios. Expira en 2 años.
  • _gid: Se usa para distinguir a los usuarios. Expira en 24 horas.
  • _gat: Se usa para limitar el porcentaje de solicitudes. Expira en 1 minuto.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies de publicidad

Utilizamos Google Adsense para mostrar publicidad en los artículos del blog acordes a tus intereses. Esta publicidad nos ayuda al mantenimiento del sitio web y del tiempo dedicado a la redacción del blog.

  • _gads: Publicidad de Google Adsense. Proporciona la publicación de anuncios de interés para el usuario. Expira en 13 meses.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies