javascript - que - Google Maps: ¿cómo crear una ventana de información personalizada?

marcar puntos en google maps api

Question

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

Answer 1

Aquí hay una solución de CSS pura basada en el ejemplo actual de infowindow 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 te olvides de votar si ayuda: P

Answer 2

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

No me puedo atribuir el mérito de esto, lo bifurqué de otro usuario de codepen para arreglar la dependencia de Google Maps para que realmente cargue

Tome nota de la llamada a:

InfoWindow() // constructor

Answer 3

Diseñar la ventana de información es bastante sencillo con vainilla javascript. Usé parte de la información de este hilo cuando escribía esto. También tomé en cuenta los posibles problemas con versiones anteriores de ie (aunque no lo he probado con ellos).

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), utilizando un div con una identificación para contener el contenido. Esto le da un gancho al sistema que podemos utilizar para manipular los elementos correctos con una simple hoja de estilo externa.

Hay un par de piezas adicionales (que no son estrictamente necesarias) que manejan cosas como dar un gancho en el div con la imagen de la ventana de información cercana.

El ciclo final oculta todas las piezas de la flecha del puntero. Lo necesitaba yo mismo porque quería transparencia en la ventana de información y la flecha se interpuso en mi 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 quieres cambiarlo a jquery (no tengo idea de por qué lo harías), entonces eso debería ser bastante simple.

Normalmente no soy un desarrollador de JavaScript, así que cualquier comentario, crítica o comentario es bienvenido :)

Answer 4

Encontré InfoBox perfecto para un estilo avanzado.

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

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

Answer 5

Incluso puede agregar su propia clase css en el contenedor / lienzo emergente o cómo quiere. Google Maps 3.7 actual tiene ventanas emergentes con un elemento de lona que incluye el contenedor div en el código. Por lo tanto, en googlemaps 3.7 puedes acceder al proceso de renderizado 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, por lo que si quieres que funcione, sigue esto .

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

Encontré esto más limpio en algunos casos.

Answer 6

La parte inferior del código puede ayudarte.

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 ubicar varias direcciones en google maps con zoom perfecto > que me ayudó a lograr esto. Puede referirlo para trabajar en el enlace JS Fiddle y completar el ejemplo.

Answer 7

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

Answer 8

Puede modificar toda InfoWindow usando jquery solo ...

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

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

El código siguiente simplemente establece un borde de 2 píxeles alrededor de InfoWindow.

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'');
        }
    }
});

Puedes hacer algo como establecer una nueva clase de CSS o simplemente agregar un nuevo elemento.

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

Answer 9

Puede usar el código a continuación para eliminar la ventana de información predeterminada del estilo. Después de que pueda 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
});

Answer 10

EDITAR Después de buscar algo, 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 esta InfoBubble que utilicé en Dive Seven, un sitio web para el registro de buceo en línea . Se parece a esto:

Google proporciona una demostración que muestra cómo implementar una ventana de información personalizada. Requiere una buena cantidad de código, pero parece ser bastante sencillo.

Hay algunos ejemplos más here . Sin embargo, definitivamente no se ven tan bonitos como el ejemplo en su captura de pantalla.