• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página

Dani Sánchez - Gestionatuweb

Desarrollador web freelance - Dani Sánchez Gestionatuweb

  • ¿Eres agencia?
  • WordPress
    • Mantenimiento
    • Desarrollo
    • Soporte técnico
  • Cursos
  • Porfolio
  • Blog
  • Contacto
  • Solicita Presupuesto
Estás aquí: Inicio / Publicaciones / Insertar un mapa de Google para indicar una ubicación y cómo llegar
Mapa de Google

Publicaciones, Tutoriales, Wordpress / 1 de septiembre de 2016

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

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 con:tutoriales, wordpress

Interacciones con los lectores

Este artículo puede contener código que podría no funcionar correctamente en tu versión de WordPress o causar incompatibilidad con tu plantilla o plugins. Úsalo bajo tu responsabilidad y haz siempre copia de tus archivos antes de modificarlos.

Comentarios

  1. Carlos dice

    9 de noviembre de 2019 en 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 en 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

Responder a Daniel, Gestionatuweb.net 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

Barra lateral primaria

Daniel Sánchez

@danisanchez82
t.me/gestionatuweb

Buscar en la web

Entradas recientes

  • Adiós WhatsApp…
  • Configuración de WP Fastest Cache
  • Cómo añadir un enlace personalizado en el menú admin de WordPress
  • Hooks de Genesis Framework (init, header y framework) – Parte 1
  • Añade el soporte de Genesis Framework para tus Custom Post

Categorías

  • Actualidad
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • Wordpress

Comentarios recientes

  • Isaias en Crear un WebView con Android Studio para cargar una web en una APP Android
  • Isaias en Crear un WebView con Android Studio para cargar una web en una APP Android
  • Carlos en Crear un WebView con Android Studio para cargar una web en una APP Android
  • william maffiold en Instalar LAMP y phpMyAdmin en MX Linux 19
  • dani en Divi, diseñar una plantilla predeterminada para cargar Custom Posts

Hosting de confianza

Footer

Buscar en la web

  • Inicio
  • Agencias
  • Mantenimiento WordPress
  • Desarrollo WordPress
  • Soporte técnico WordPress
  • Cursos
  • Portfolio
  • Blog
  • Contacto
  • Política de privacidad

Mis redes

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

© 2016–2021 Gestionatuweb · Programado con Genesis Framework · Iniciar sesión

Utilizo cookies para obtener datos estadísticos sobre el uso de mi sitio web y personalizar la publicidad (no intrusiva) del blog según tus intereses. En ningún caso estas cookies te identifican como persona, solo a tu dispositivo en la Red. Aceptando el uso de cookies me ayudarás a mantenener el blog gracias a la publicidad y podré mejorar la experiencia de uso gracias a la analítica web. Puedes navegar por mi sitio web sin que se instale ninguna de estas cookies, aunque este mensaje permanecerá visible en todo momento.AceptoPolítica de privacidad