css - open - Estilo de Google Maps InfoWindow

multiple infowindows google maps

Question

He estado intentando InfoWindow mi Google Maps InfoWindow , pero la documentación es muy limitada sobre este tema. ¿Cómo se estilo una InfoWindow ?

Answer 1

Google escribió un código para ayudar con esto. Aquí hay algunos ejemplos: Ejemplo usando InfoBubble , marcadores con estilo y ventana de información personalizada (usando OverlayView).

El código en los enlaces anteriores toma diferentes rutas para lograr resultados similares. La esencia de esto es que no es fácil diseñar InfoWindows directamente, y podría ser más fácil usar la clase adicional InfoBubble en lugar de InfoWindow, o anular GOverlay. Otra opción sería modificar los elementos de InfoWindow utilizando javascript (o jQuery), como lo sugirió más tarde ATOzTOA.

Posiblemente el más simple de estos ejemplos sea el uso de InfoBubble en lugar de InfoWindow. InfoBubble está disponible al importar este archivo (que debe alojar usted mismo): http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

La página del proyecto Github de InfoBubble .

InfoBubble es muy flexible, en comparación con InfoWindow:

 infoBubble = new InfoBubble({
      map: map,
      content: ''<div class="mylabel">The label</div>'',
      position: new google.maps.LatLng(-32.0, 149.0),
      shadowStyle: 1,
      padding: 0,
      backgroundColor: ''rgb(57,57,57)'',
      borderRadius: 5,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: ''#2c2c2c'',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 30,
      backgroundClassName: ''transparent'',
      arrowStyle: 2
});

infoBubble.open();

También puede llamarlo con un mapa y un marcador determinados para abrir:

infoBubble.open(map, marker);

Como otro ejemplo, el ejemplo personalizado de la ventana de información amplía la clase GOverlay de la API de Google Maps y lo usa como base para crear una ventana de información más flexible. Primero crea la clase:

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

luego de lo cual procede a anular GOverlay:

InfoBox.prototype = new google.maps.OverlayView();

A continuación, debe anular los métodos que necesita: createElement , draw , remove y panMap . Se complica bastante, pero en teoría usted solo está dibujando un div en el mapa usted mismo, en lugar de usar una ventana de información normal.

Answer 2

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 3

También puedes usar una clase css.

$(''#hook'').parent().parent().parent().siblings().addClass("class_name");

¡Buen día!

Answer 4

Utilicé el siguiente código para aplicar algunos CSS externos:

boxText = document.createElement("html");
boxText.innerHTML = "<head><link rel=''stylesheet'' href=''style.css''/></head><body>[some html]<body>";

infowindow.setContent(boxText);
infowindow.open(map, marker);

Answer 5

Utilice el complemento de InfoBox de la Biblioteca de utilidades de Google Maps. Hace que diseñar / gestionar ventanas emergentes de mapas sea mucho más fácil.

Tenga en cuenta que deberá asegurarse de que se carga después de la API de google maps:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
<script src="/js/infobox_packed.js" async defer></script>

Answer 6

google.maps.event.addListener(infowindow, ''domready'', function() {

    // Reference to the DIV that wraps the bottom of infowindow
    var iwOuter = $(''.gm-style-iw'');

    /* Since this div is in a position prior to .gm-div style-iw.
     * We use jQuery and create a iwBackground variable,
     * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
    */
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children('':nth-child(2)'').css({''display'' : ''none''});

    // Removes white background DIV
    iwBackground.children('':nth-child(4)'').css({''display'' : ''none''});

    // Moves the infowindow 115px to the right.
    iwOuter.parent().parent().css({left: ''115px''});

    // Moves the shadow of the arrow 76px to the left margin.
    iwBackground.children('':nth-child(1)'').attr(''style'', function(i,s){ return s + ''left: 76px !important;''});

    // Moves the arrow 76px to the left margin.
    iwBackground.children('':nth-child(3)'').attr(''style'', function(i,s){ return s + ''left: 76px !important;''});

    // Changes the desired tail shadow color.
    iwBackground.children('':nth-child(3)'').find(''div'').children().css({''box-shadow'': ''rgba(72, 181, 233, 0.6) 0px 1px 6px'', ''z-index'' : ''1''});

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: ''1'', right: ''38px'', top: ''3px'', border: ''7px solid #48b5e9'', ''border-radius'': ''13px'', ''box-shadow'': ''0 0 5px #3990B9''});

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if($(''.iw-content'').height() < 140){
      $(''.iw-bottom-gradient'').css({display: ''none''});
    }

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
    iwCloseBtn.mouseout(function(){
      $(this).css({opacity: ''1''});
    });
  });

// CSS puesto en la hoja de estilo

.gm-style-iw {
  background-color: rgb(237, 28, 36);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    color: rgb(255, 255, 255) !important;
    font-family: gothambook;
    text-align: center;
    top: 15px !important;
    width: 150px !important;
}