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

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 :)