jquery - setcontent - GMaps V3 InfoWindow: deshabilite el botón cerrar "x"

infowindow setcontent html

Question

Por lo que veo, en la v2 de la API de GMaps había una propiedad de "botones" del objeto InfoWindow que se podía definir de forma tal que, dado que InfoWindow no tiene botón de cierre:

marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});

Lo anterior sin embargo no aplica para v3. ¿Alguien sabe una manera de hacerlo? Leí sobre una utilidad que reemplaza InfoWindow llamada InfoBox pero no se ha desarrollado durante los últimos 2 años. Actualmente estoy usando la última versión 3.13 de Gmaps v3 API.

Una solución con jQuery es aceptable, si no hay una mejor solución.

Answer 1

Actualizar

Mostrar un <div> en la parte superior de un mapa de google es sencillo:

ejemplo css

div.info {
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 100px;
    display: none;
    background-color: #fff;
    border: 3px solid #ebebeb;
    padding: 10px;
}

Una clase de info <div> en algún lugar del marcado:

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>

Siempre es bueno tener una breve referencia a la div:

var info = document.getElementById(''myinfo'');

La parte más complicada, mostrar el <div> , cómo y cuándo - aquí solo asigno un manejador de clics al mapa (después de haberlo creado) y muestro la información <div> en la ubicación del mouse XY dentro del mapa:

google.maps.event.addListener(map, ''click'', function(args) {
  var x=args.pixel.x; //we clicked here
  var y=args.pixel.y;

  info.style.left=x+''px'';
  info.style.top=y+''px'';
  info.style.display=''block'';
});

Lo que obtienes con esto es que la información <div> te sigue en el mapa, cada vez que haces clic.

• Necesitarás más estilo para que se adapte a tus necesidades, por ejemplo, para que parezca un InfoBox, pero eso debería ser fácil de descubrir, no soy bibliotecario :)
• Y tal vez más tarde en algo para cerrar la información, pero que no quería en primer lugar :)

Respuesta original

¡No puedes ! No hay forma de hacer esto en las opciones actuales de v3.13 InfoWindow .

Una solución alternativa es deshabilitar la imagen que contiene la X:

<style>
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
    display: none;
}
</style>

¡Pero esto no es de ninguna manera aconsejable !

src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png es a lo que se refiere la ventana de información hoy . Mañana, o en un mes, o en un año, esta imagen-referencia seguro que ha cambiado. Como puede ver, si busca "soluciones" similares, hechas a lo largo del tiempo, como this . Hoy están todas rotas, por ejemplo, el esfuerzo no tiene sentido.

Creo que hay una lógica extremadamente buena en google "negándose" a seguir la solicitud de ocultar el botón de cierre. Si no necesita un botón de cierre, ¿para qué necesita InfoWindow? Cuando estés mejor solo para mostrar un <div> en el mapa.

Answer 2

A mi manera (sin Jquery) y con realinear al centro de la ventana de información:

var content = document.querySelector(''.gm-style-iw'');
content.parentNode.removeChild(content.nextElementSibling);
content.style.setProperty(''width'', ''auto'', ''important'');
content.style.setProperty(''right'', content.style.left, ''important'');
content.style.setProperty(''text-align'', ''center'', ''important'');

Answer 3

Gracias a Tushar, pero también necesitas poner este código en el controlador de eventos

google.maps.event.addListener(infowindow, ''domready'', function(){
    $(".gm-style-iw").next("div").hide();
});
    

Answer 4

Inspeccionarlo - es un div con una clase de cierre sobre él - puede enfocarlo con CSS y configurarlo para display: none;

Answer 5

Mi solución:

            google.maps.event.addListener(marker, ''click'', function() {

            var wnd = new google.maps.InfoWindow({
                content: "<table id=''viewObject'' >...</table>"
            });

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

                $("#viewObject").parent().parent().next().remove();
            });

            wnd.open(map, marker);
        });

Answer 6

No pude obtener ninguno de los $(".gm-style-iw").next("div").hide(); respuestas para trabajar incluso cuando se llama al código después de cargar el DOM, ya que hubo una demora entre la llamada del código y la creación de la ventana de información. Lo que hice fue crear un intervalo que se ejecuta hasta que encuentre la ventana de información y elimine el elemento "X". Si hay una mejor manera por favor dígame.

var removeCloseButton = setInterval(
    function()
    {
        if ($(".gm-style-iw").length)
        {
            $(".gm-style-iw").next("div").remove();
            clearInterval(removeCloseButton);
        }
    },
    10
);

Answer 7

Para ampliar la respuesta de Louis Moore , también puede centrar el texto después de quitar el botón de cerrar:

.gm-style-iw + div {display: none;}
.gm-style-iw {text-align:center;}

Sin centrar:

Con centrado:

Answer 8

Puede establecer la propiedad "closeBoxURL" de la ventana de información en "" y hará que el botón desaparezca.

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    closeBoxURL: ""
});

Answer 9

Puedes usar esto Esto no ocultará otras imágenes como control de zoom, control de panoramización, etc. en la ventana dom ready of info puede usar esto.

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

      document.querySelector(".gm-style-iw").nextElementSibling.style.display = "none";
});

Answer 10

Solo puedes usar la opción

closeBoxURL : ""

InfoBox

De la documentación de Google

closeBoxURL | string | La URL de la imagen que representa el cuadro de cierre. Nota: El valor predeterminado es la URL para el cuadro de cierre estándar de Google. Establezca esta propiedad en "" si no se necesita un cuadro de cierre.

Ejemplo

   var infowindow = new google.maps.InfoWindow({
                          closeBoxURL: "",
                          closeBoxMargin : ""

                        });

Answer 11

También puedes hacerlo a través del CSS.

.gm-style-iw + div {display: none;}

Answer 12

Usando el método de Archers, tengo que hacer

$(".gm-style-iw").css("left", function() { //remove close and recenter
  return ($(this).parent().width() - $(this).find(">:first-child").width()) / 2;
}).next("div").remove();

Answer 13

Utilicé la respuesta dada por Tushar Gaurav, pero la amplié un poco ...

$(".gm-style-iw:contains(" + infoText + ")").css("left", function() {
    return ($(this).parent().width() - $(this).width()) / 2;
}).next("div").remove();

Esto eliminará la X de una ventana de información con el texto en infoText , y luego infoText centrar el texto ya que está descentrado después de quitar el botón de cerrar.

Solo agrego esto para cualquier persona que tropiece con esta página como yo lo hice.

Answer 14

en el complemento gmap3 de jQuery, esto se puede lograr utilizando

google.maps.event.addListener($(''#map'').gmap3({get:{name:"infowindow"}}), ''domready'', function(){
    $(".gm-style-iw").next("div").remove();
});

Answer 15

si usa jquery simplemente agregue esto

$(".gm-style-iw").next("div").hide();

Answer 16

closeBoxURL: ""

como se indicó anteriormente, no se aplica a InfoWIndow . Esta es una opción en el InfoBox .

Por ejemplo, puede usar esta solución alternativa de CSS para eliminar la X y el botón que hace clic en los alrededores:

.gm-style-iw + div {
  display: none;
}

Y como dijo Davidsonrad . Esta es una solución al código como lo es hoy. Es probable que sea cambiado.

Answer 17

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

    var iwOuter = jQuery(''.gm-style-iw'');

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

    // Apply the desired effect to the close button
    iwCloseBtn.remove()
});

Como no hay ninguna opción para ocultar esto mediante el parámetro API, debe encontrar el elemento apuntando a la ventana de contenido y eliminándolo.

Espero que esto ayude :)