Question

I have a web app that uses Google Maps API v3. I have it displaying directions on the map and in list form. However I’ve found that if I do a directions search and click on the first turn in the list, the map does not display that turn properly. Rather, the map seems to zoom in on a point in the middle of the route where the appropriate info bubble may not even be visible.

If I click on any other turn in the directions first, it will work correctly, even if I then click on the first turn. If I click on the first turn so that it displays incorrectly, then click any other step, it will start to work correctly.

I’ve noticed this happens very similarly across multiple browsers.

I am using pretty standard code from Google’s examples, basically:

myDirectionsService = new google.maps.DirectionsService();
myDirectionsRenderer = new google.maps.DirectionsRenderer({map: myMap, draggable: true});

(And then later when a directions button is clicked…)

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};
myDirectionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        myDirectionsRenderer.setDirections(result);
        myDirectionsRenderer.setMap(myMap);
        myDirectionsRenderer.setPanel(myPanel);
    }
}

So far I’ve tried to come up with workarounds; I tried forcing a resize event, but to no avail.

Answer 1

This is a known bug in the v3.5 API. Loading the older 3.4 version should fix the problem. Read more about this on my website: http://dreamdealer.nl/tutorials/getting_directions_with_google_maps.html#comments