提交后無法刷新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”並驗證，您將看到我們需要另一個驗證來縮放和刷新地圖。 黑色標頭是正常的，是的，我替換了元素，以在一側顯示路由說明。

在我的網站上我有灰色區域，但是我不能在這里重復，但是我認為問題是相同的。

當然，一旦我們使用它，它就會起作用。

Answer 1

一個不錯的法國開發者Matthieu Rebillard找到了答案：

我在地圖上進行了CSS轉換。 CSS轉換和javascript刷新無法一起使用。 我刪除了CSS轉換，現在一切正常:)