user2762982
user2762982

Reputation: 1

Remove scroll bars on infowindows without specifying a fixed height?

Is anyone else seeing scroll bars on infowindows since the new "visual refresh"? I've got horizontal AND vertical scroll bars now, on initial page load only. It seems like the infowindow isn't adjusting to the height of my content, therefore generating a vertical scroll bar. The vertical scroll bar reduces the max width, so a horizontal scroll bar is also generated.

This only happens on initial page load, on the infowindow that auto-opens. Any infowindows manually clicked by the user do not have this problem.

I know I can remove scroll bars by assigning a fixed height and width to my content div, but I'd rather not have a fixed height. After all, the infowindows display perfectly if they are user-clicked. Only the auto-open displays incorrectly.

Any ideas how to fix this?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var centerLat = 27.946222681465837;
  var centerLon = -82.45767116546631;
  var zoomLevel = 14;
  var poiName = 'Tampa Convention Center';
  var poiLat = 27.94194340459138;
  var poiLon = -82.45656609535217;
  var properties = [
['Embassy Suites Tampa - Downtown Convention Center', 27.9422467033296, -82.4550640583038, '513 South Florida Avenue, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11344727O.html', 'The new Embassy Suites Tampa - Downtown Convention Center is located in the heart of the downtown Tampa business and financial center and connected to', 3],
['Sheraton Tampa Riverwalk Hotel', 27.9462700700723, -82.4593234062194, '200 North Ashley Street, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10231645O.html', 'Live it up and spend a relaxing day along the riverfront or lounging by the pool at this Sheraton Tampa Riverwalk', 4],
['Hyatt Regency Tampa', 27.9462226814658, -82.4576711654663, '211 North Tampa Street, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10084987O.html', 'Immerse yourself in the endless activity that surrounds Hyatt Regency Tampa, ideally located in the heart of the city', 3],
['Westin Tampa Harbour Island', 27.9379246159165, -82.4548253417015, '725 South Harbour Island Boulevard, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10000868O.html', 'Escape to this resort-like atmosphere at the Westin Tampa Harbour Island situated on a unique island in downtown Tampa', 4],
['Marriott Execustay the Loft At Channelside', 27.9498075708323, -82.4464809894561, '217 12th Street, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11406326O.html', 'Hotel amenities include non-smoking rooms, room service, high-speed internet, kitchenette, interior corridors. Pets are allowed...', 0],
['Courtyard by Marriott Tampa Downtown', 27.9511012293795, -82.4608764052391, '102 East Cass Street, Tampa, FL 33602 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpadt-courtyard-tampa-downtown%2f', 'Close to area attractions and three miles from the Airport, the hotel?s cozy guest rooms offer many comforts of home', 3],
['Residence Inn by Marriott Tampa Downtown', 27.9514897977845, -82.4610587954521, '101 East Tyler Street, Tampa, FL 33602 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpatd-residence-inn-tampa-downtown%2f', 'Enjoy spacious suites with a full kitchen and separate area for sleeping, working, and relaxing at this Residence Inn', 3],
['Howard Johnson Plaza - Tampa Downtown Riverfront', 27.9532549232401, -82.4637946486473, '111 West Fortune Street, Tampa, FL 33602 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11247829O.html', 'The Howard Johnson Plaza Hotel is opposite the Tampa Bay Performing Arts Center, 10 blocks from the Convention Center and Florida Aquarium, and approximately', 3],
['Hampton Inn and Suites Tampa Ybor City Downtown', 27.9597844519444, -82.4449869990348, '1301 East 7th Avenue, Tampa, FL 33605 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11320830O.html', 'Enjoy the history and ambiance of days gone by while having all of the comforts and conveniences of today', 3],
['Hyde Park Hotel', 27.9353772520539, -82.4814328551292, '2105 West Bristol Avenue, Tampa, FL 33606 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11381170O.html', 'Nestled in the heart of Historic Old Hyde Park and just a short stroll from jazz concerts, fine dining, and shopping', 2],
['Hilton Garden Inn Tampa Ybor Historic District', 27.961722385545, -82.4398076534271, '1700 East 9th Avenue, Tampa, FL 33605 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10226978O.html', 'The Hilton Garden Inn Ybor Historic District hotel in Tampa is located one block from Centro Ybor and a trolley car ride away from Channelside', 3],
['Best Western Tampa', 27.9360099517541, -82.5056505203247, '734 South Dale Mabry, Tampa, FL 33609 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-11240897O.html', 'Guests staying at this Tampa hotel will be minutes from Tampa and St. Petersburg area attractions, and corporate offices', 2],
['Quality Inn Airport', 27.9333772331311, -82.5052320957183, '1020 South Dale Mabry, Tampa, FL 33629 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10200737O.html', 'This hotel is centrally located in one of the upscale South Tampa areas with spacious guest rooms and many amenities', 2],
['Courtyard by Marriott Tampa Westshore', 27.9525915237689, -82.5070023536682, '3805 West Cypress, Tampa, FL 33607 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpawt-courtyard-tampa-westshore-airport%2f', 'The Courtyard is approximately four miles from downtown and Tampa International Airport', 3],
['Grand Hyatt Tampa Bay', 27.9664272971451, -82.5499257445335, '2900 Bayport Drive, Tampa, FL 33607 US ', 'http://reservations.tampaconventioncenterhotels.com/hotel/10027374-10204605O.html', 'Let your spirit soar at this resort-like hotel set along a wildlife preserve and offering a unique retreat for everyone', 4],
['Renaissance Tampa International Plaza Hotel', 27.966394131316, -82.5198554992675, '4200 Jim Walter Boulevard, Tampa, FL 33607 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpaim-renaissance-tampa-international-plaza-hotel%2f', 'Featuring a lush, open-air courtyard, this Renaissance makes you feel like you\'re a world away in a Meditteranean villa', 4],
['Tampa Marriott Waterside', 27.940865265464, -82.4538624286651, '700 South Florida Avenue, Tampa, FL 33602 US ', 'http://www.tkqlhce.com/click-4060330-10406976?url=http%3a%2f%2fwww.marriott.com%2freservations%2fsetAMCookie.mi%3fAFF%3dMarriott_CustomLink%26AFFNAME%3d%25zp%26mid%3d%2fhotels%2ftravel%2ftpamc-tampa-marriott-waterside-hotel-and-marina%2f', 'The pool and pool deck will be closed for enhancements from August 30, 2010 through October 5, 2010. Alternate arrangements have been made just steps away', 4]];
  var infowindow = new google.maps.InfoWindow();
function makeInfoWindow(marker, content, theMap){google.maps.event.addListener(marker, 'click', function () {infowindow.setContent(content); infowindow.open(theMap, marker);});}
function setMarkers(map, locations) {var image = new google.maps.MarkerImage('images/bluebed.png', new google.maps.Size(31, 31), new google.maps.Point(0,0), new google.maps.Point(15, 30)); var shadow = new google.maps.MarkerImage('images/shadow.png', new google.maps.Size(47, 31), new google.maps.Point(0,0), new google.maps.Point(15, 30)); for (var i = 0; i < locations.length; i++) {var hotel = locations[i]; var contentString = '<div style="width:260px;"><strong>' + hotel[0] + '</strong><br />' + hotel[3] + '<br /><a href="' + hotel[4] + '"><strong>Rates and Reservations</strong></a><br /><img src="images/star' + hotel[6] + '.jpg" width="77" height="15" alt="rating"><p class="infowindows"><a href="' + hotel[4] + '">Features</a> | <a href="' + hotel[4] + '">Photos</a> (if available)</p><p>' + hotel[5] + '...<a href="' + hotel[4] + '">more</a></p></div>'; var myLatLng = new google.maps.LatLng(hotel[1], hotel[2]); var marker = new google.maps.Marker({position: myLatLng, map: map, shadow: shadow, icon: image, title: hotel[0]}); makeInfoWindow(marker, contentString, map);} google.maps.event.trigger(marker, 'click');}
function initialize() {var myOptions = {zoom: zoomLevel, center: new google.maps.LatLng(centerLat, centerLon), scaleControl: true, scrollwheel: false, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var pinImage = new google.maps.MarkerImage('images/bed1.png', new google.maps.Size(37, 38), new google.maps.Point(0,0), new google.maps.Point(18, 38)); var pinShadow = new google.maps.MarkerImage('images/shadow1.png', new google.maps.Size(60, 38), new google.maps.Point(0,0), new google.maps.Point(18, 38)); var marker = new google.maps.Marker({position: new google.maps.LatLng(poiLat, poiLon), map: map, shadow: pinShadow, icon: pinImage}); poiName = '<strong>' + poiName + '</strong>'; makeInfoWindow(marker, poiName, map); google.maps.event.addListener(map, 'click', function() {infowindow.close();}); setMarkers(map, properties);}
</script>

Upvotes: 0

Views: 1048

Answers (1)

Cameron
Cameron

Reputation: 11

I encountered as similar issue, but overriding the font didn't fix it. Waiting until the map fully loaded before displaying the InfoWindow did.

Unfortunately, the API does not appear to have an event that fires when the map is loaded. There is a "tilesloaded" which accomplishes roughly the same thing, except that it also fires every time the map is panned or the zoom is changed. Here was my workaround:

var mapLoaded = false;
google.maps.event.addDomListener(map, 'tilesloaded', function() {
  if (!mapLoaded) {
    // open InfoWindow here
  }
  mapLoaded = true;
});

Upvotes: 1

Related Questions