Google지도 jquery show() 후

Question

내 문제가로드 내 문제는 google지도 jquery에서 show() 함수 호출 후로드되지 않습니다. 나는 display : none을 사용하여 페이지로드시 부서를 닫습니다. 그래서 google.maps.event.trigger (지도, '크기 조정')을 통해 이루어졌지만 잘 모르겠다 google.maps.event.trigger (지도, '크기 조정')을 배치 할 위치는 입니다. 내 jquery. 부트 스트랩 모델 팝업이 제대로 표시되면지도와 주소 및 기타 기능이 제대로 작동합니다. 하지만 jquery의 show 함수를 클릭하면 제대로로드되지 않습니다.

나는 다음과 같은 질문을 읽었습니다 : 1). (Google Maps Display:None Problem) 2) (How to use google.maps.event.trigger(map, 'resize'))

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBNEQCHUYPsekbYz7tym8Q4Ne2vlUsvnFc"></script> 
      <!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> --> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
      <script> 
      $(document).ready(function(){ 
      $(".address_open").click(function(){ 
        // i don't know the placing of this function. 
        google.maps.event.trigger(map, 'resize'); 
        $(".Mymap1").show(); 
      }); 
      }); 
      </script> 
      <script type="text/javascript"> 
       var map; 
       var marker; 
       var coords = new google.maps.LatLng(); 
       var myLatlng = new google.maps.LatLng(23.022505,72.5713621); 
       var geocoder = new google.maps.Geocoder(); 
       var infowindow = new google.maps.InfoWindow(); 
       function initialize(){ 
        var mapOptions = { 
         zoom: 18, 
         center: myLatlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 

        map = new google.maps.Map(document.getElementById("myMap"), mapOptions); 
        google.maps.event.trigger(map, 'resize'); 
        marker = new google.maps.Marker({ 
         map: map, 
         position: myLatlng, 
         draggable: true 
        });  

        geocoder.geocode({'latLng': myLatlng }, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          if (results[0]) { 
           $('#address').val(results[0].formatted_address); 
           $('#latitude').val(marker.getPosition().lat()); 
           $('#longitude').val(marker.getPosition().lng()); 
           infowindow.setContent(results[0].formatted_address); 
           infowindow.open(map, marker); 
          } 
         } 
        }); 


        google.maps.event.addListener(marker, 'dragend', function() { 

        geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          if (results[0]) { 
           $('#address').val(results[0].formatted_address); 
           $('#latitude').val(marker.getPosition().lat()); 
           $('#longitude').val(marker.getPosition().lng()); 
           infowindow.setContent(results[0].formatted_address); 
           infowindow.open(map, marker); 
          } 
         } 
        }); 
       }); 
       } 
       google.maps.event.addDomListener(window, 'load', initialize); 
      </script> 

부트 스트랩 모델지도를 클릭에 대한

<div class="modal fade" id="myModal" role="dialog"> 
         <div class="modal-dialog modal-lg"> 
          <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title">Map View</h4> 
          </div>       
          <div class="modal-body"> 
           <div id="myMap" class="Mymap1"></div> 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </div> 
          </div> 
         </div> 

기타 부문.

 $(".address_open").click(function(){ 
       // i don't know the placing of this function. 
       google.maps.event.trigger(map, 'resize'); 
       $(".Mymap1").show(); 
     }); 

이

$('#myModal').on('show.bs.modal', function (e) { 
    google.maps.event.trigger(map, 'resize'); 
    $(".Mymap1").show();//Am not sure what is this? 
}); 

에 코드 아래

는

 <div class="form-group"> 
           <label> Address</label> 
           <input type="text" id="address" data-toggle="modal" data-target="#myModal" name="txtName" value="<?php if(isset($fname)){echo $fname;} else { echo ""; } ?>" class="form-control abc address_open" />  
           <input type="hidden" id="latitude" placeholder="Latitude"/> 
           <input type="hidden" id="longitude" placeholder="Longitude"/>     
</div> 

Answer 1

변경 이미 모달 가리키는 버튼 데이터 대상이되는 원인. 'show.bs.modal'이벤트에서 더 많은 작업을 할 수 있습니다. 모달을 엽니 다.