Search code examples
javascriptgoogle-maps-api-3infowindow

Cropped InfoWindow when using Google Maps v3 directions


With GMap APi v3 I am using the directions service to generate a route for the user, but once the route is rendered on the map, the target infowindow I placed becomes cropped, as the map is centered on the route, not the target.

How can I tell GM to either:

  1. Automatically focus (or center) on the infowindow, instead of the route
  2. Show the infowindow in a way that it is not cropped (for example: using the tooltip arrow on the top right of the infowindow instead of the lower left, which causes the window to appear on the top right of the route target)

Solution

  • I managed to get it done by using .setCenter() within the directionsService callback (after receiving a proper response). However, this only worked when using a timeout. It may not be the purest solution, but it is the only one available to me at the moment.

    /* _x & _y are passed as coordinates */
    var _latLng=new google.maps.LatLng(_x,_y);
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsRenderer.setDirections(response);
            window.setTimeout(function(){
                gmap.setCenter(_lagLng);
            }, 500);
        }
    }
    

    It seems that if you call .setCenter() too early, gmap is still building up and once done, centering on the route - thus overriding your last command to .setCenter() - however, using the timeout as a workaround, the call is done after the map is built and the route rendered.