Hi I am using InfoWindow to get custom popup on google maps,
but I can’t set it width, I tried setting it inline to wrapper tag, but it doesn’t work.
In this case I need it to be 750px.
Here is jsfiddle: http://jsfiddle.net/xxast/
and here is html file: http://www.mediafire.com/view/?66dbe6xzn1mul10
Here is method that is setting InfoWindow content:
function getContent(parts, kmlEvent) {
var content = ""+
"<div id='width800' class='google-infobox-content' >" +
"<div class='image'>" +
"<img src='http://maps.google.com/maps/api/staticmap?center=" + kmlEvent.latLng.Ya + "," + kmlEvent.latLng.Za + "&zoom=13&size=150x150&maptype=roadmap&sensor=false&language=&markers=color:red|label:none|48.7758013,9.2529132' title='' width='150' height='150' >" +
"<br />" +
"<a href='https://maps.google.com/maps?sensore=true&daddr=" + kmlEvent.latLng.Za + "," + kmlEvent.latLng.Ya + "' target='_blank' >Full Google Map</a>" +
"<a href='http://maps.google.com/help/maps/directions/Somewhere' target='_blank' >Directions</a>" +
"</div>" +
"<div class='location'>" +
"<p>" + parts[0] + "</p>" +
"<p>" + parts[1] + "</p>" +
"<p>" + parts[2] + "</p>" +
"<br/>" +
"<p>" + parts[3] + "</p>" +
"</div>" +
"<div class='contact'>" +
"<p>" + parts[4] + "</p>" +
"<p>" + parts[5] + "</p>" +
"<a href='mailto:" + parts[6] + "' >" + parts[6] + "</a>" +
"<a href='" + parts[7] + "' target='_blank' >" + parts[7] + "</a>" +
"</div>" +
"<div class='others'>" +
"<p><b>Product line</b></p>" +
"<p>" + parts[8] +
"</p>" +
"</div>" +
"</div>";
return content;
}
Updated
here is updated jsfiddle with setted maxWidth and inline width for wrapper tag, but still it doesn’t work: http://jsfiddle.net/xxast/3/
In infoWinfow options try to set maxWidth to 750. Also to make sure the style is not overwiten by default goole values rename google-infobox-content to something different. You may try to use a custom info window library:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html