¿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:
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&source=s_q&hl=es&geocode=&q=icare+internet&aq=&sll=40.550005,-3.620596&sspn=0.025826,0.038581&ie=UTF8&hq=icare+internet&hnear=&ll=40.550005,-3.620596&spn=0.025826,0.038581&t=m&output=embed"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&source=embed&hl=es&geocode=&q=icare+internet&aq=&sll=40.550005,-3.620596&sspn=0.025826,0.038581&ie=UTF8&hq=icare+internet&hnear=&ll=40.550005,-3.620596&spn=0.025826,0.038581&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&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&source=s_q&hl=es&geocode=&q=icare+internet&aq=&sll=40.550005,-3.620596&sspn=0.025826,0.038581&ie=UTF8&hq=icare+internet&hnear=&ll=40.550005,-3.620596&spn=0.025826,0.038581&t=m&output=embed&iwloc=near"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&source=embed&hl=es&geocode=&q=icare+internet&aq=&sll=40.550005,-3.620596&sspn=0.025826,0.038581&ie=UTF8&hq=icare+internet&hnear=&ll=40.550005,-3.620596&spn=0.025826,0.038581&t=m" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>
Y éste es el resultado:
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&source=s_q&hl=es&geocode=&q=icare+internet&aq=&sll=40.550005,-3.620596&sspn=0.025826,0.038581&ie=UTF8&hq=icare+internet&hnear=&t=m&ll=40.547543,-3.616476&spn=0.005707,0.00912&z=16&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&source=embed&hl=es&geocode=&q=icare+internet&aq=&sll=40.550005,-3.620596&sspn=0.025826,0.038581&ie=UTF8&hq=icare+internet&hnear=&t=m&ll=40.547543,-3.616476&spn=0.005707,0.00912&z=16&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&source=s_q&hl=es&geocode=&q=icare+internet&aq=&sll=40.550005,-3.620596&sspn=0.025826,0.038581&ie=UTF8&hq=icare+internet&hnear=&t=m&ll=40.547543,-3.616476&spn=0.005707,0.00912&z=16&iwloc=&output=embed"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&source=embed&hl=es&geocode=&q=icare+internet&aq=&sll=40.550005,-3.620596&sspn=0.025826,0.038581&ie=UTF8&hq=icare+internet&hnear=&t=m&ll=40.547543,-3.616476&spn=0.005707,0.00912&z=16&iwloc=" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>
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.