The Lonely Cats | Diseño y Desarrollo web

Diseño y desarrollo web en Madrid

cerrar formulario

¿Te llamamos? X

¿Te llamamos?

Déjanos tus datos y nos pondremos en contacto contigo en breve

formulario de llamada rápida

  • Este campo es un campo de validación y debe quedar sin cambios.
  • Inicio
  • Servicios
  • Portfolio
  • Quienes somos
  • Contacto
  • Blog
  • Soporte
The Lonely Cats > Diseño web > Quitar el bocadillo infowindow de un Google Maps

Quitar el bocadillo infowindow de un Google Maps

23/10/2013 by The Lonely Cats

¿Alguna vez os habéis preguntado si hay alguna manera de eliminar el bocadillo de un mapa de Google Maps para embeberlo en una página web?

Utilizar un mapa de Google en nuestra página web es muy sencillo. Google nos ofrece el código iframe para embeberlo en nuestro sitio directamente e incluso nos da la opción de seleccionar y personalizar el tamaño del mapa. El problema es que siempre nos encontramos junto al pin o marcador de localización con un (a veces molesto) infowindow (el bocadillo con la dirección postal) o también llamado: el globo, balloon, info bubble… del mapa de Google.

Esta ventana de información sale por defecto, no siempre está centrada y además ocupa buena parte del mapa variando bastante el aspecto:


Ver mapa más grande

Eliminar la info window al embeber un mapa de Google

El iframe correspondiente a este mapa es el siguiente:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=icare+internet&amp;aq=&amp;sll=40.550005,-3.620596&amp;sspn=0.025826,0.038581&amp;ie=UTF8&amp;hq=icare+internet&amp;hnear=&amp;ll=40.550005,-3.620596&amp;spn=0.025826,0.038581&amp;t=m&amp;output=embed"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=icare+internet&amp;aq=&amp;sll=40.550005,-3.620596&amp;sspn=0.025826,0.038581&amp;ie=UTF8&amp;hq=icare+internet&amp;hnear=&amp;ll=40.550005,-3.620596&amp;spn=0.025826,0.038581&amp;t=m" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>

 

Pues bien, para que desaparezca el info window de sólo tenemos que sustituir «output=embed» por «output=embed&amp;iwloc=near». El código quedaría así:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=icare+internet&amp;aq=&amp;sll=40.550005,-3.620596&amp;sspn=0.025826,0.038581&amp;ie=UTF8&amp;hq=icare+internet&amp;hnear=&amp;ll=40.550005,-3.620596&amp;spn=0.025826,0.038581&amp;t=m&amp;output=embed&amp;iwloc=near"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=icare+internet&amp;aq=&amp;sll=40.550005,-3.620596&amp;sspn=0.025826,0.038581&amp;ie=UTF8&amp;hq=icare+internet&amp;hnear=&amp;ll=40.550005,-3.620596&amp;spn=0.025826,0.038581&amp;t=m" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>

 

Y éste es el resultado:

Ver mapa más grande

Otra forma de quitar el bocadillo de un Google Maps personalizado

Cuando obtenemos el código para incrustarlo en nuestra página web (donde previamente hemos personalizado el tamaño del mapa) el código html que nos proporciona Google varía ligeramente:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=icare+internet&amp;aq=&amp;sll=40.550005,-3.620596&amp;sspn=0.025826,0.038581&amp;ie=UTF8&amp;hq=icare+internet&amp;hnear=&amp;t=m&amp;ll=40.547543,-3.616476&amp;spn=0.005707,0.00912&amp;z=16&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=icare+internet&amp;aq=&amp;sll=40.550005,-3.620596&amp;sspn=0.025826,0.038581&amp;ie=UTF8&amp;hq=icare+internet&amp;hnear=&amp;t=m&amp;ll=40.547543,-3.616476&amp;spn=0.005707,0.00912&amp;z=16&amp;iwloc=A" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>

 

En este caso para eliminar el bocadillo del mapa además de la forma anterior, se puede hacer de otra manera más fácil de recordar. Hay que buscar la expresión «iwloc=A» (que aparece dos veces) y borrar la «A» de la siguiente manera:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=icare+internet&amp;aq=&amp;sll=40.550005,-3.620596&amp;sspn=0.025826,0.038581&amp;ie=UTF8&amp;hq=icare+internet&amp;hnear=&amp;t=m&amp;ll=40.547543,-3.616476&amp;spn=0.005707,0.00912&amp;z=16&amp;iwloc=&amp;output=embed"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=icare+internet&amp;aq=&amp;sll=40.550005,-3.620596&amp;sspn=0.025826,0.038581&amp;ie=UTF8&amp;hq=icare+internet&amp;hnear=&amp;t=m&amp;ll=40.547543,-3.616476&amp;spn=0.005707,0.00912&amp;z=16&amp;iwloc=" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>

 


Ver mapa más grande

Mi recomendación es hacerlo de esta manera ya que puedes entrar a la vista de personalizar y obtener el mismo mapa sin tocar nada pero con el código que nos interesa.

En un próximo post os explicaremos cómo hacer que tu empresa aparezca en Google Maps.

Compártelo
TwitterFacebookWhatsAppLinkedInPin It

Archivado en:Diseño web

Barra lateral primaria

Categorías

  • Diseño web
  • LOPD
  • MKT Online | SEM
  • Nosotros
  • Novedades
  • Optimización Web
  • Redes Sociales
  • Seguridad Web
  • Sin categoría
  • WordPress

Últimas entradas

  • 6 herramientas gratuitas para crear formularios en tu tienda online
  • ¿Cómo deben ser las webs del 2021? Tendencias de Diseño Web
  • Errores de SEO que pueden costarle caro a tu negocio
  • Qué son las Web Stories de Google y para qué se usan
  • Cómo montar una escuela online

Síguenos en Redes Sociales

¿Quieres conocernos un poco mejor?

Footer

Servicios

  • Diseño web
  • Desarrollo web
  • Optimización SEO
  • Mantenimiento Web y Asesoramiento

Secciones

  • Inicio
  • Servicios
  • Portfolio
  • Quienes somos
  • Contacto
  • Blog
  • Soporte

¿Hablamos?

¿Quieres preguntarnos algo? ¿Te interesa alguno de nuestros servicios? ¿Quieres que te invitemos a un café? No lo dudes
Contáctanos

loading image The Lonely Cats 2021


Aviso legal | Política de Privacidad | Política de Cookies