I have a V3 map loading and centering on a particular longitude/latitude by default. Once loaded, the user can enter their address to get directions to that point. When this happens, the map is resized to accomodate a directions box to its left. Because of this, the route is off-center in the map window. I tried the following code, which I thought should logically work, but to no avail.

New realization: If I resize the window in any way, it begins to work as expected.

Found the issue: I needed to trigger google.maps.event.trigger(map, 'resize') after I resize the map container.

directionsService.route(query, function(result,status) {
    if (status === google.maps.DirectionsStatus.OK) {
        // This sets the directions container to display:block and resizes the map
        document.getElementById('map-container').className = "directions";
        directions.setDirections(result);
        var bounds = result.routes[0].bounds;
        map.fitBounds(bounds);
        map.setCenter(bounds.getCenter());
    } else {
        alert("");
    }
});

UPDATE 2018-05-22

With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.

The documentation states

When the map is resized, the map center is fixed

  • The full-screen control now preserves center.

  • There is no longer any need to trigger the resize event manually.

source: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); doesn't have any effect starting from version 3.32

javascript google-maps google-maps-api-3
Edit
Report