Send a link to your page. Or you can create a sample page with your infowindow.
On Tue, Mar 22, 2011 at 10:43 AM, Ed Lerner <[email protected]> wrote: > This question has been asked in a few different variants, but none of the > solutions fix my problem. When I click a marker and the InfoWindow appears, > the height does not adjust if the length of the content is longer that the > InfoWindow default height (90px). > > - I am using text-only, no images. > - I have tried maxWidth. > - I have checked for inherited CSS. > - I have wrapped my content in a div and applied my CSS to that, > including a height. > - I have even tried forcing the InfoWindow to resize with jQuery using > the domready event on the InfoWindow. > > I only have a few hairs left. Here is my 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(); > > > This question has been asked in a few different variants, but none of > the solutions fix my problem. When I click a marker and the InfoWindow > appears, the height does not adjust if the length of the content is longer > that the InfoWindow default height (90px). > > - I am using text-only, no images. > - I have tried maxWidth. > - I have checked for inherited CSS. > - I have wrapped my content in a div and applied my CSS to that, > including a height. > - I have even tried forcing the InfoWindow to resize with jQuery using > the domready event on the InfoWindow. > > I only have a few hairs left. Here is my 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 and Address come from an AJAX query of an XML file. Data is not > the issue, as it always comes through correctly. codeAddress() is called > after the data has been retrieved and formatted. > > HTML in the file: > > <div id="google_map"> <div id="map_canvas" style="width:279px; > height:178px"></div> </div> > > CSS for my InfoWindow content (no other CSS applies to the map): > > #bubble-marker{ font-size:11px; line-height:15px; } > > > -- > You received this message because you are subscribed to the Google Groups > "Google Maps JavaScript API v3" group. > To post to this group, send email to > [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group at > http://groups.google.com/group/google-maps-js-api-v3?hl=en. > -- Best and Regards, Chin Hua Kong -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
