Google Maps InfoBox

Publicado por Iván Gajate el 27 de abril de 2013 en Desarrollo Web, JavaScript

Muy interesante esta librería de JavaScript que nos permite personalizar la ventanita de info que aparece cuando hacemos click sobre una burbuja de Google Maps.

Es muy completa y está muy bien documentada.

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Aquí dejo un ejemplo, cargo los datos de las burbujas de un json externo para que sea mas facil meter mas datos:
Este ejemplo solo funciona subido a un servidor en desde el localhost, debido a la seguridad a la hora de cargar archivos externos.
Descargar Ejemplo Infobox

 

3 comentarios para “Google Maps InfoBox”

  1. De nada, gracias a ti! 🙂

    Sólo una cosa, respecto a los comentarios del blog. Por lo que veo, está anulado el margen inferior de los párrafos en los comentarios:

    .commentlist p {margin: 0px 30px 0px 53px}

    Sería bastante más digerible el chorreo de enlaces si tuvieran algo de margen inferior los párrafos.

    Un saludo!

  2. Uou!, que cantidad de enlaces guapos!, gracias! 😉

  3. Gracias por el ejemplo, Iván.

    Te dejo un apaño rápido para que lo puedas embeber fácilmente y así poder salsear con él http://jsfiddle.net/7bR7x/1/

    Para los interesados en conocer más opciones de personalización de los estilos de Google Maps, además de los Custom Markers e InfoBoxes mostrados en este post, recomendaría los siguientes recursos:

    Custom Styled Maps: para personalizar la apariencia, visibilidad y esquema de colores de cualquier elemento del mapa.
    http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
    https://developers.google.com/maps/documentation/javascript/styling
    http://jsfiddle.net/mbe7c/5/
    http://jsfiddle.net/mbe7c/

    MarkerClustererPlus: para personalizar los marcadores de clusters.
    http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/advanced_example.html
    http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html