google maps api 3 - open - Obtenga Google Maps v3 para cambiar el tamaño de la altura de InfoWindow
infowindow google maps (5)
El lienzo de tu mapa es demasiado pequeño. Aumente el ancho / alto de su elemento <div id="map_canvas"> y debería ver InfoWindows más grandes automáticamente.
Dicho esto, tuve el mismo problema en un sitio que estaba construyendo. Lo resolví creando un div clonado que contenía el contenido de InfoWindow, midiendo el ancho y la altura de ese div, y luego configurando el div del contenido de InfoWindow para que tuviera el ancho y la altura medidos. Aquí está mi código portado a la mitad de su función codeAddress (también tenga en cuenta que maxWidth: 200 de su declaración de InfoWindow):
function codeAddress(infotext,address) {
geocoder.geocode({ ''address'': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
// Create temporary div off to the side, containing infotext:
var $cloneInfotext = $(''<div>'' + infotext + ''</div>'')
.css({marginLeft: ''-9999px'', position: ''absolute''})
.appendTo($(''body''));
// Wrap infotext with a div that has an explicit width and height,
// found by measuring the temporary div:
infotext = ''<div style="width: '' + $cloneInfotext.width() + ''px; '' +
''height: '' + $cloneInfotext.height() + ''px">'' + infotext +
''</div>'';
// Delete the temporary div:
$cloneInfotext.remove();
// Note no maxWidth defined here:
var infowindow = new google.maps.InfoWindow({ content: infotext });
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, ''click'', function () {
infowindow.open(map, marker);
});
}
});
}
Cuando hago clic en un marcador y aparece la ventana de información, la altura no se ajusta si la longitud del contenido es más larga que la altura predeterminada de la ventana de información (90px).
- Estoy usando sólo texto, no hay imágenes.
- He intentado maxwidth.
- He comprobado el CSS heredado.
- Envolví mi contenido en un div y apliqué mi CSS a eso, incluida una altura.
- Incluso he intentado forzar el InfoWindow para cambiar el tamaño con jQuery usando el evento domready en el InfoWindow.
Sólo me quedan unos pocos pelos. Aquí está mi JS:
var geocoder;
var map;
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.8801,-87.6272);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress(infotext,address) {
geocoder.geocode({ ''address'': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = ''/path-to/mapMarker.png'';
var infowindow = new google.maps.InfoWindow({ content: infotext, maxWidth: 200 });
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image
});
google.maps.event.addListener(marker, ''click'', function () {
infowindow.open(map, marker);
});
}
});
}
function checkZipcode(reqZip) {
if ( /[0-9]{5}/.test(reqZip) ) {
$.ajax({
url: ''data.aspx?zip='' + reqZip,
dataType: ''json'',
success: function(results) {
$.each(results.products.product, function() {
var display = "<span id=''bubble-marker''><strong>"+this.name+"</strong><br>"+
this.address+"<br>"+
this.city+", "+this.state+" "+this.zip+"<br>"+
this.phone+"</span>";
var address = this.address+","+
this.city+","+
this.state+","+
this.zip;
codeAddress(display,address);
});
},
error: function() { $(''#information-bar'').text(''fail''); }
});
} else { $(''#information-bar'').text(''Zip codes are five digit numbers.''); }
}
$(''#check-zip'').click(function() { $(''#information-bar'').text(''''); checkZipcode($(''#requested-zipcode'').val()); });
initialize();
InfoText y Address provienen de una consulta AJAX de un archivo XML. Los datos no son el problema, ya que siempre se transmiten correctamente. Se llama a codeAddress () después de recuperar y formatear los datos.
HTML en el archivo:
<div id="google_map"> <div id="map_canvas" style="width:279px; height:178px"></div> </div>
CSS para mi contenido de InfoWindow (no se aplica ningún otro CSS al mapa):
#bubble-marker{ font-size:11px; line-height:15px; }
Finalmente encontré una solución de trabajo para el problema. No es tan flexible como deseé, pero es bastante bueno. Fundamentalmente, el punto clave es: no use una cadena como contenido de la ventana, sino un nodo DOM. Este es mi código:
// this dom node will act as wrapper for our content
var wrapper = document.createElement("div");
// inject markup into the wrapper
wrapper.innerHTML = myMethodToGetMarkup();
// style containing overflow declarations
wrapper.className = "map-popup";
// fixed height only :P
wrapper.style.height = "60px";
// initialize the window using wrapper node
var popup = new google.maps.InfoWindow({content: wrapper});
// open the window
popup.open(map, instance);
La siguiente es la declaración de CSS:
div.map-popup {
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
ps: "instancia" se refiere a la subclase personalizada actual de google.maps.OverlayView (que estoy extendiendo)
No es realmente una respuesta (la solución de daveoncode para crear un nodo DOM y usarlo como contenido es correcto), pero si necesita cambiar dinámicamente el contenido una vez establecido (por ejemplo, con jQuery), entonces puede forzar a gmail para cambiar el tamaño de la ventana de información con:
infoWindowLinea.setContent(infoWindowLinea.getContent());
Simplemente envuelva el contenido de InfoBox con DIV con el fondo de relleno: 30 px;
JS:
map_info_window = new google.maps.InfoWindow();
var $content = $(''<div class="infobox">'').html(content);
map_info_window.setContent($content.get(0));
map_info_window.open(map, marker);
CSS:
.infobox{
padding-bottom: 30px;
}
Simplemente envuelva su contenido con un div y especifique su altura: <div style="height:60px">...</div> , por ejemplo
myMarker.setContent(''<div style="height:60px">'' + txt + ''</div>'');
- En mi caso fue bastante.