GMapz   Yet another Google Maps library. https://github.com/carloscabo/gmapz

Infowindows desplazados (no necesita infobox.js)

Se puede desplazar el infowindow standard de Google Maps añadiendo el parámetro pixelOffset durante la inicialización del mapa.

Sample 6A   Infowindows de sistema desplazados

map goes here

map_sample_6A = new GMapz.map(
  $('#map-sample-6A'), {
    center: [36.08, -6.82],
    zoom: 5,
    pixelOffset: [158, 100] // Offset of infowindow
  }
);
 
map_sample_6A.onReady = function() {
  this.addLocations(spain_locs).fitBounds();
};

GMapz añade la clase adicional .gm-style-iw-container dentro del mapa, lo que permite personalizaciones del infowindow estandar de Google Maps (por ejemplo en esta demo cambiar la posición de la flecha).

Puedes echar un vistazo a los estilos del infobox de esta demo en: https://github.com/carloscabo/gmapz/blob/master/js/gmapz/gmapz.infobox.scss

Personalización avanzada de InfoWindows empleando infobox.js

Algunos proyectos pueden requerir de infowindows personalizadas (las ventanitas que se abren en el mapa cuando pulsamos sobre un marker). Para esta funcionalidad hace falta incluir la librería infobox.modified.js, y una hoja de estilo que defina el estilo de nuestros infoboxes, para ver el estilo empleado en esta demo puedes echar un ojo a gmapz-sample-infobox.scss ( ver ).

ATENCIÓN!: Para poder integrar infobox.js de forma sencilla en el assets pipeline (y en la filosofía de funcionamiento de GMapz) ha habido que modificarla (no ha habido otra solución elegante). Si actualizas la librería, deberás aplicar las mismas modificaciones :(

Inicialización de infobox

content: '...' Este el el código que se insertará en el infobox cuando se crea, cuando el usuario pulse sobre un marcador automáticamente se reemplazará {{__REPLACE__}} por el contenido de la clave: iw: del marker que hayamos definido en el JSON de marcadores / localizaciones.

pixelOffset: Desplazamiento del infobox en pixels desde la posición del pin / marker.

closeBoxURL: '', enableEventPropagation: true estas dos líneas nos permiten desactivar el botón de cerrar que añade infobox automáticamente para crear uno propio nuestro. Nuestro botón de cerrar deberá tener la clase .gmapz-ibx-close, el evento de cerrado se attacheará automáticamente.

infobox.js dispone de algunos ejemplos de las opciones de inicialización en https://htmlpreview.github.io/?https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/infobox/docs/examples.html y la referencias completa con todas las opciones disponibles en http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/infobox/docs/reference.html.

Sample 6B   Infowindows personalizados con infobox.js

map goes here

// Enable infobox.js when google.maps loaded
GMapz.onGoogleMapsReady = function () {
  // Enable infobox library
  infoBoxLoader(true);
};
 
// Start map with default options
map_sample_6B = new GMapz.map($('#map-sample-11'));
 
map_sample_6B.onReady = function() {
  // Define custom infobox style
  var ib_options = {
    content: '<div class="gmapz-ibx"><div class="gmapz-ibx-close"></div><div class="gmapz-ibx-content">{{__REPLACE__}}</div><div>',
    pixelOffset: new google.maps.Size(-130, -96), // x, y offset from marker
    closeBoxURL: '',
    enableEventPropagation: true
  };
 
  // Add custom infobox to the map
  this.defineInfoBox( ib_options );
 
  // Load Italy cities AFTER define infobox
  this.addLocations(italy_cities).fitBounds();
};
 
map_sample_6B.onDraw = function() {
  // Open Rome marker / infobox
  this.markers['roma'].click();
};

Puedes echar un vistazo a los estilos del infobox de esta demo en: https://github.com/carloscabo/gmapz/blob/master/js/gmapz/gmapz.infobox.scss