Google지도가 jQuery로 필드 세트에서 작동하지 않습니다. 위로 이동/내리기

Question

제출 양식의 경우 필드 세트를 사용하여 슬라이드 업하고 이전 필드 세트가 유효하면 jQuery로 슬라이드합니다. 필드 세트 번호 3에는 경도와 위도를 기반으로 고객의 주소를 찾을 수있는 Google지도가 있습니다.

<fieldset id="werkgebied" style="display: none;"> 
               <div class="row"> 
                <div class="form-group"> 
                <label class="col-md-3 control-label" for="adres">Uw Adres</label> 
                 <div class="col-md-6" id="stapwerkgebied_adres"> 

                 </div> 
                </div> 
               </div> 
               <div class="row"> 
                <div class="form-group"> 

                 <label class="col-md-3 control-label" for="adres">Werkgebied</label> 
                 <div class="col-md-6"> 
                  <div id="kaartje" style="width:400px;height:400px;"></div> 

                  <script type="text/javascript"> 
                  var map; 
                  var centerpoint; 

                  function initmap(latvar=52.3747388,longvar=4.7585307){ 
                   var map = new google.maps.Map(document.getElementById('kaartje'), { 
                   center: {lat: Number(latvar), lng: Number(longvar)}, 
                   zoom: 9 
                  }); 
                  var kmRadius = $("#aantalkm").val(); 
                  circle = new google.maps.Circle({ 
                   center: {lat: Number(latvar), lng: Number(longvar)}, 
                   map: map, 
                   strokeColor: '#000', 
                   strokeWeight: 2, 
                   strokeOpacity: 0.5, 
                   fillColor: '#046e94', 
                   fillOpacity: 0.5, 
                   radius: kmRadius * 1000 
                  }); 
                  } 
                  function updateMarker(coord) { 
                   var kmRadius = $("#aantalkm").val(); 
                   circle.setRadius(kmRadius*1000); 
                  } 
                  </script> 
                  <script async defer 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnsp8B8c942fe8i42UEAImAcAoTbDVYN4&callback=initmap"> 
</script> 
                  </div> 
                 </div> 
                </div> 
                <div class="row"> 
                 <div class="form-group"> 
                  <label class="col-md-3 control-label" for="aantalkm">Afstand (km)</label> 
                   <div class="col-md-2"><input id="aantalkm" class="form-control" type="text" onChange="updateMarker()" value="20" /> 
                  </div> 
                 </div> 
                </div> 
                <div class="row"> 
                 <div class="form-group"> 
                 <label class="col-md-3 control-label" for="submit"></label> 
                   <div class="col-md-6"> 
                    <button type="button" id="werkgebied_prev" class="btn btn-primary mb-xl previous">Vorige</button> 
                    <button type="button" id="werkgebied_next" class="btn btn-primary mb-xl next">Verder</button> 
                   </div> 
                 </div> 
                </div> 
               </fieldset> 

지도가 나타나면지도가 작동하지 않습니다. 난을 삭제하는 경우 :

는

style="display: none;" 

지도는 작동하지만 이전이 개 필드 셋까지 valide을 숨길 수 없습니다.

Answer 1

여기의 문제는 display:none 스타일이 fieldset에 설정된 것입니다. Google지도는 대상 요소가 올바른 초기화를 위해 표시되어야합니다. 귀하의 상황에서 당신은 약간의 트릭을 할 수 있고, 구글 맵핑을위한 요소를 즉석에서 생성하고 CSS를 뷰포트 밖으로 옮기고지도가 완전히 초기화 될 때까지 기다리십시오 (tilesloaded 이벤트를 사용할 수 있음). 지도 노드를 fieldset으로 옮기는 것보다 여기에 당신을 도울 수있는 작은 바이올린이 있습니다 https://jsfiddle.net/9a2nwe2b/1/.

fieldset이 숨겨져 있고 표시 한 후지도가 완전히 작동하고있는 것을 볼 수 있습니다.