google maps v3 cambiar el tamaño de la ventana de información

Question

Me gustaría establecer el tamaño de una ventana de información para que se ajuste al contenido interno. La ventana de información estándar es demasiado amplia. Intenté usar maxWidth, pero parece que no funciona. ¿Cuál es la mejor manera de cambiar el tamaño de una ventana de información?

ver código:

window.setContent(inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info); 

la información que se mostrará en la burbuja se parece a esto (\ n significa siguiente línea)

NY \ ntotal 60 \ N2009: 10 \ N2010: 20 \ n2011: 30

Answer 1

Lo que quiere hacer es reemplazar la "estándar" Googlemaps infoWindow con la suya y poner su contenido en ella. Una vez que reemplaza la ventana de información de GM estándar, tiene mucha libertad de trabajo. Lo que hice fue esto:

Agregue un nuevo ID de estilo llamado #infoWindow, y configure su ancho.

#infoWindow { 
    width: 150px; 
} 

fuera de cualquier función dentro de mi Javascript, creo un nuevo infoWindow:

var infoWindow = new google.maps.InfoWindow(); 

Crear una nueva var dentro de la función que establece la información mostrada por el marcador (s), y establecer su valor al contenido:

var html = '<div id="infoWindow">'; 
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30'; 
html +='</div>'; 

Llame a la función createMarker usando la información de ubicación que ha creado en otro lugar, e incluir el código hTML var como uno de los argumentos:

var marker = createMarker(point,name,html); 

La función createMarker le declarará en otro lugar, lo que traería toda la información junta, visualizar el marcador en el mapa, y mostrar la información anterior cuando se hace clic en:

function createMarker(latlng,name,html) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title: name 
     }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(contentString); 
     infoWindow.open(map,marker); 
     }); 
} 

Answer 2

por favor tome un vistazo a la API siguientes referencias y ejemplos:

Google Map V3 Ejemplos: https://developers.google.com/maps/documentation/javascript/examples/

Google Mapa V3 API Ref: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

Answer 3

JFrancis answers es el correcto, ¡no olvide agregar "! Important" en su CSS cuando configure el ancho! Esto podría parecer algo menor, pero si no lo haces, ¡tu CSS simplemente se sobrescribirá!

#infoWindow { 
    width: 150px !important; 
} 

Answer 4

Para ajustar el tamaño de la burbuja info-ventana dentro de un mapa de Google que es suficiente para añadir el siguiente CSS en el archivo CSS:

.gmap-popup { 
    max-width:204px; 
    max-height:110px; 
} 

Adaptado de this discussion.

Answer 5

Solo para que todos estén claros, si tropiezan con este hilo.

Todo lo que necesita hacer es establecer el alto y el ancho de un contenedor en el contenido de su ventana de información.

No es necesario que anule las clases de Google y no necesita complicarse demasiado sobre esto.

var contentString = '<div class="map-info-window">'+ 
    '<h1>My Info Window</h1>'+ 
    '<p>Hello World</p>'+ 
    '</div>'; 

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

En mi css tengo esto:

.map-info-window { 
    width:200px; 
    height:200px; 
} 

eso es todo. Eso es todo lo que necesita hacer para establecer el ancho de una ventana de información de Google Maps.

Answer 6

Para mí esto CSS funciona bien:

.gm-style-iw { 
    width: 324px !important; 
    height: 120px !important; 
}