Динамическая высота jQuery

Question

Я использую API Карт Google, чтобы вытянуть карту с серией точек на ней. Я также вытягиваю направления, которые отображаются в элементе с ID = "directionsPanel". Это все хорошо, за исключением того факта, что когда мы набираем определенное количество очков (3 в Firefox, 4 в Chrome), они выплескиваются со страницы.

Я использую следующий код jQuery, чтобы определить, какова высота элемента (предположительно после загрузки направлений), и затем настроить его соответствующим образом:

$(document).ready(function() {
  if($.browser.mozilla)
  {
    var sHeight = $("#directionsPanel").height();
    sHeight = (sHeight * 1.5);
    $("#directionsPanel").height(sHeight);
  }
  else
  {
    // do stuff for other browsers
  }

});

К сожалению, элемент не корректируется на нужную величину (возможно, он не определяет правильную начальную высоту?), И все еще не удается найти нужную страницу. Любые мысли о том, как я мог бы сделать это более надежным?

Answer 1

Google Maps API, вероятно, позволяет вам указать функцию обратного вызова, когда карта загружена, и именно туда вы должны поместить свой код.

Например:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var myOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: haight
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
    //YOUR CODE FOR RESIZING HERE
  });
}
<div>
<b>Mode of Travel: </b>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
</select>
</div>

Don 't $(document).ready(), поскольку он запускается сразу после загрузки DOM.