提交后无法刷新 google 地图：需要 2 次输入

Question

我正在使用 google 路线在访问者设置起始地址后在地图上显示路线。
但是在使用这段有效的代码之后：

direction.setDirections(response)

我无法刷新我的地图：

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>

例如，如果您设置 "Toulouse" 并进行验证，您会发现我们需要另一个验证来缩放和刷新地图。黑色 header 是正常的，是的，我将元素替换为侧面有路线描述。

在我的网站上我有灰色区域，但我不能在这里重复，但我认为问题是一样的。

当然，一旦我们使用它，它就会起作用。

Answer 1

一位优秀的法国开发人员，Matthieu Rebillard 找到了答案：

我在地图上进行了 css 转换。 Css 转换和 javascript 刷新不能一起工作。我删除了 css 转换，现在一切正常:)

提交后无法刷新 google 地图：需要 2 次输入

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

maps

triggers

resize

directions