Question

I am using the Google Maps API to pull back a map with a series of points on it. I am also pulling back directions which are displayed in the element with ID=”directionsPanel”. This is all well and good except for the fact that when we get past a certain number of points (3 in Firefox, 4 in Chrome) they spill off the page.

I am using the following jQuery code to detect what the element height is (presumably after the directions are loaded) and then adjust it accordingly:

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

});

Unfortunately the element is not being adjusted to the right amount (perhaps it is not detecting the correct initial height?) and things are still spilling off the page. Any thoughts on how I might make this more robust?

Answer 1

Google Maps API probably lets you specify a callback function for when the map has loaded, and that is where you should put your code.

For example:

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 use $(document).ready() since that executes immediately when the DOM is loaded.