can't refresh google map after submit : need 2 enter - triggers

Question

I'm using google directions to display route on a map after visitors set origin address.
But after using this code which works :
direction.setDirections(response)
I can't refresh my map with:
google.maps.event.trigger(map, "resize");
jQuery(document).ready(function($){
var calculate;
var direction;
var panel;
var map = null;
var center;
panel = document.getElementById('panel');
$('.bandeau').hide();
function new_map( $el ) {
var $markers = $el.find('.marker');
var maOptions = {
zoom : 7,
center : new google.maps.LatLng(0, 0),
scaleControl: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// création de la carte
map = new google.maps.Map( $el[0], maOptions);
// ajout de la référence du marqueur
map.markers = [];
// création du marqueur
$markers.each(function(){
add_marker( $(this), map );
});
// centrer la carte
center_map( map );
// renvoyer la carte
return map;
}
/*
* Ajout d'un marqueur
*/
function add_marker( $marker, map ) {
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// creation d'un marqueur
var marker = new google.maps.Marker({
position : latlng,
map : map
});
// ajout au tableau
map.markers.push( marker );
}
/*
* Centrer la carte
*/
function center_map( map ) {
var bounds = new google.maps.LatLngBounds();
// Boucler sur tous les marqueurs
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
// Si un seul marqueur
if( map.markers.length == 1 )
{
// le centrer sur la carte
map.setCenter( bounds.getCenter() );
map.setZoom( 14 );
}
else
{
map.fitBounds( bounds );
}
}
/*
* affichage carte
*/
$(document).ready(function(){
$('.ms-map-ctc').each(function(){
// Création de la carte
map = new_map( $(this) );
google.maps.event.addDomListener(map, 'idle', function() {
center = map.getCenter();
});
direction = new google.maps.DirectionsRenderer({
map : map,
panel : panel // Dom element pour afficher les instructions d'itinéraire
});
});
});
/*
* Itinéraire
*/
$( "#direction" ).on('submit', function(e) {
e.preventDefault();
origin = document.getElementById('ms-origin').value; // Le point de départ
destination = 'Paris France'; // Le point d'arrivée
if(origin && destination){
var request = {
origin : origin,
destination : destination,
travelMode : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite
}
var directionsService = new google.maps.DirectionsService(); // Service de calcul d'itinéraire
directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours
if(status == google.maps.DirectionsStatus.OK){
center = map.getCenter();
// On redimensionne la carte pour afficher l'itinéraire à côté
$('.bandeau').show( 200, function() {
$('#ms-map-ctc').addClass('resized-map');
});
direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
});
}
});
/*
* Places
*/
var lenItin = $('#ms-origin').length;
if (lenItin != 0) {
var autocomplete;
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('ms-origin')),
{ types: ['geocode'] }
);
}
});
.bandeau{
width: 100%;
height: 40px;
background: #000;
}
#ms-map-ctc{
position: relative;
width: 100%;
height: 50vh;
}
#ms-map-ctc.resized-map{
width: 70%;
height: 90vh;
}
#panel{
position: absolute;
top: 0; right: 0;
width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=false" type="text/javascript"></script>
<div class="bandeau"></div>
<div class="gm-wrap-ctc">
<div id="ms-map-ctc" class="ms-map-ctc">
<div class="marker" data-lat="48.854546" data-lng="2.349958"></div>
</div>
</div>
<form action="" method="get" name="direction" id="direction">
<input type="text" name="origin" id="ms-origin">
<input id="ms-bt-calc" type="submit" value="Calculer votre itinéraire / Calculate your route">
</form>
<div id="panel"></div>
If you set "Toulouse" for example, and validate, you'll see that we need another validate to zoom and refresh the map. The black header is normal and yes I replace element to have the route description on the side.
On my website I got grey zones but I can't repeat it here but I think the problem is the same.
Of course, once we use it, it works after.

Answer 1

A good french developper, Matthieu Rebillard found the answer :
I had a css transition on the map. Css transitions and javascript refresh couldn't work together. I removed the css transition and everything work now :)