javascript - personalizar - multiple infowindows google maps

Google Maps API v3: estilos personalizados para infowindow

Question

He intentado muchos de los ejemplos de la referencia de google maps y de otras preguntas de stackoverflow, pero no he podido obtener estilos personalizados en mi infowindow.

Estoy usando algo muy similar a lo que se hizo en esta otra respuesta stackoverflow

Aquí está funcionando / editable: http://jsfiddle.net/3VMPL/

En particular, me gustaría tener las esquinas cuadradas en lugar de las redondeadas.

Answer 1

Puede diseñar la ventana de información mediante el .gm-style-iw clase .gm-style-iw .

  #map-canvas {
    .gm-style {
      > div:first-child > div + div > div:last-child > div > div {
        &:first-child > div,
        &:first-child > div > div > div,
        &:last-child,
        &:last-child > img {
          display: none !important;
        }
      }
      .gm-style-iw {
        top: 20px !important;
        left: 130px !important;
        background: #fff;
        padding: 10px;
        height: 40px;
      }
    }
  }

Answer 2

Quería tener una ventana emergente de formulario de contacto transparente en el marcador del mapa de google. Lo hice finalmente con la ayuda del plugin de infobox y esta publicación . Eso es lo que hice.

Cualquiera puede descargar y usar la fuente desde here

Answer 3

Si no puede usar infobox y necesita personalizar la ventana de información, puede acceder a ella usando css. No es bonito, se basa en gran medida en primero: niño / último: selectores de niños psuedo y, obviamente, en si Google alguna vez decide cambiar su estructura html mapa.

Con suerte, el siguiente CSS puede ayudar a alguien más en un aprieto cuando se ven obligados a lidiar con infowindow.

/* white background and box outline */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div
{
    /* we have to use !important because we are overwritng inline styles */
    background-color: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

/* arrow colour */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div > div > div
{
    background-color: #003366 !important; 
}

/* close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child
{
    margin-right: 5px;
    margin-top: 5px;
}

/* image icon inside close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child > img
{
    display: none;
}

/* positioning of infowindow */
.gm-style-iw
{
    top: 22px !important;
    left: 22px !important;
}

Answer 4

Actualización : consulte esta respuesta para conocer el estado de la migración del código fuente de infobox a github.

¿Qué le parece usar el complemento de Infobox en lugar de usar la ventana de información habitual? Puse un ejemplo completo en un ejemplo jsfiddle aquí . Lo principal acerca de la caja de información es que puedes crear tu infobox dentro del html de tu página, dándote control total sobre cómo se ve usando css (y algunas opciones de javascript, si es necesario). Aquí está el html para el cuadro de información:

<div class="infobox-wrapper">
    <div id="infobox1">
        Infobox is very easy to customize because, well, it''s your code
    </div>
</div>

La idea aquí es que el div "infobox-wrapper" estará oculto (es decir, mostrar: ninguno en su CSS) y luego en su javascript inicializará un objeto InfoBox y le dará una referencia a su "infobox" (dentro del contenedor oculto ) al igual que:

infobox = new InfoBox({
    content: document.getElementById("infobox1"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
                background: "url(''http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif'') no-repeat",
                opacity: 0.75,
                width: "280px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});

Este es solo un ejemplo de algunas de las opciones disponibles. La única clave obligatoria es el content : la referencia al cuadro de información.

Y para abrir la ventana de información:

google.maps.event.addListener(marker, ''click'', function() {
    infobox.open(map, this);
    map.panTo(loc);
});

Y para demostrar aún más la flexibilidad del InfoBox , este jsfiddle tiene una imagen con una transición css como el "cuadro de información".

Y un consejo final: no use la clase "infobox" en su html. Desafortunadamente, es usado por el complemento cuando la caja de información se genera realmente.