Google Maps: ¿Cómo crear una ventana de información personalizada?

La ventana de información de Google Maps predeterminada para un marcador de mapa es muy redonda. ¿Cómo creo una ventana de información personalizada con esquinas cuadradas?

EDITAR Después de buscar, esta parece ser la mejor opción:

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Puede ver una versión personalizada de este InfoBubble que usé en Dive Seven, un sitio web para el registro de buceo en línea . Se parece a esto:

Hay algunos ejemplos más aquí . Sin embargo, definitivamente no se ven tan bien como el ejemplo de la captura de pantalla.

Puede modificar toda la ventana de información utilizando jquery solo ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

Aquí, el elemento <p> actuará como un enlace a la ventana de información real. Una vez que el domready se activa, el elemento se activará y se podrá acceder a él usando javascript / jquery, como $('#hook').parent().parent().parent().parent().

El siguiente código solo establece un borde de 2 píxeles alrededor de la ventana de información.

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

Puede hacer cualquier cosa como configurar una nueva clase de CSS o simplemente agregar un nuevo elemento.

Juega con los elementos para conseguir lo que necesitas ...

Encontré InfoBox perfecto para estilos avanzados.

Un InfoBox se comporta como un google.maps.InfoWindow , pero admite varias propiedades adicionales para un estilo avanzado. Un InfoBox también se puede utilizar como etiqueta de mapa. Un InfoBox también activa los mismos eventos que un google.maps.InfoWindow .

Incluya http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js en su página

Diseñar la ventana de información es bastante sencillo con javascript vanilla. Usé parte de la información de este hilo al escribir esto. También tomé en cuenta los posibles problemas con versiones anteriores de ie (aunque no lo he probado con ellas).

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

El código crea la ventana de información como de costumbre (sin necesidad de complementos, superposiciones personalizadas o código enorme), usando un div con una identificación para contener el contenido. Esto proporciona un gancho en el sistema que podemos usar para obtener los elementos correctos para manipularlos con una simple hoja de estilo externa.

Hay un par de piezas adicionales (que no son estrictamente necesarias) que manejan cosas como darle un gancho al div con la imagen de la ventana de información de cierre.

El bucle final oculta todas las piezas de la flecha del puntero. Yo mismo necesitaba esto, ya que quería tener transparencia en la ventana de información y la flecha se interpuso en el camino. Por supuesto, con el gancho, cambiar el código para reemplazar la imagen de la flecha con un png de su elección también debería ser bastante simple.

Si desea cambiarlo a jquery (no tengo idea de por qué lo haría), entonces debería ser bastante simple.

Por lo general, no soy un desarrollador de JavaScript, por lo que cualquier pensamiento, comentario o crítica son bienvenidos :)

El siguiente fragmento de código puede ayudarlo.

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

Aquí hay un artículo < Cómo localizar varias direcciones en Google Maps con zoom perfecto > que me ayudó a lograrlo. Puede consultar el enlace JS Fiddle y el ejemplo completo.

No estoy seguro de cómo lo está haciendo FWIX.com específicamente, pero apuesto a que están usando superposiciones personalizadas .

Puede usar el siguiente código para eliminar la ventana de información predeterminada de estilo. Después, puede usar el código HTML para inforwindow:

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});

Aquí hay una solución CSS pura basada en el ejemplo actual de la ventana de información en Google:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

Esta es una solución rápida que funcionará bien para pequeñas ventanas de información. No olvides votar a favor si te ayuda: P

Incluso puede agregar su propia clase css en el contenedor / lienzo emergente o cómo lo desee. Los mapas actuales de Google 3.7 tienen ventanas emergentes diseñadas por un elemento de lienzo que antepone el contenedor div emergente en el código. Entonces, en googlemaps 3.7 puede ingresar al proceso de renderización mediante el evento domready de popup como este:

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

element.previousElementSibling no está presente en IE8, así que si quieres que funcione, sigue esto .

consulte la última referencia de InfoWindow para eventos y más ...

Encontré esto más limpio en algunos casos.

Creo que la mejor respuesta que he encontrado está aquí: https://codepen.io/sentrathis96/pen/yJPZGx

No puedo atribuirme el mérito de esto, lo bifurqué de otro usuario de codepen para corregir la dependencia de Google Maps para cargar realmente

Anote la llamada a:

InfoWindow() // constructor