버튼 클릭시 setTimeout 이벤트가 작동하지 않습니다.

Question

안녕하세요 여러분,이 버튼을 클릭하면 setTimeout 함수가 시작되어 모달에 Google지도가 표시되는 위치로 이동하려고합니다. 바로 지금, 버튼을 클릭 할 때마다 모달이로드 된 gif를 표시하는 데 막혔습니다. 이 문제를 해결하는 방법에 대한 아이디어는 대단히 감사하겠습니다! (나는 그것이로드 할 때 타이머의지도를 가져야 그렇지 않으면 그냥 모달의 왼쪽 상단에로드됩니다.)

버튼 :

<p><a id ="hammondButton" data-toggle="modal" href="#HmapModal" class="btn btn-de 
fault"><b>View Map &raquo;</b></a></p> 

코드 :

<!-- Hammond Modal --> 
    <div class="modal fade" id="HmapModal" tabindex="-1" role="dialog" aria-labelledby="HmapModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header" align="center"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h2 class="modal-title">Hammond Location</h2> 
       </div> 
       <div class="modal-body"> 
        <div id="loadingGif" style="position: fixed; margin-left: 14%; margin-top: 15%;" ><img src="~/Content/Images/LGIF.gif" /></div> 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
        <div style="overflow:hidden;height:500px;width:578px;"> 
         <div id="gmap_canvas" style="height:500px;width:578px;"></div> 
         <style> 
          #gmap_canvas img { 
           max-width: none !important; 
           background: none !important; 
          } 
         </style><a class="google-map-code" href="http://www.map-embed.com" id="get-map-data">www.map-embed.com</a> 
        </div> 
        <script type="text/javascript"> 
         $("#hammondButton").button().click(function() { 
          setTimeout(function init_map() { 
           google.maps.event.trigger(map, 'resize'); 
           var myOptions = { 
            zoom: 13, 
            center: new google.maps.LatLng(30.4900271, -90.4629746), 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
           }; 
           map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions); 
           marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(30.4900271, -90.4629746) }); 
           google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); 
           infowindow.open(map, marker); 
          }, 2500); 
          google.maps.event.addDomListener(window, 'load', init_map); 
          google.maps.event.trigger(map, 'resize'); 
         }); 
        </script> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.location.href=window.location.href">Close</button> 
       </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

Answer 1

코드에 Google API 키가 없습니다.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script> 

당신이 자바 스크립트에서, <a>를 사용하려면

는 다음 물품.

$("#hammondButton").button().click(function() { 
event.preventDefault(); 
} 

그렇지는 그냥 그리고 심지어 자바 스크립트

$("#hammondButton").click(function() { 
          setTimeout(function init_map() { 
           google.maps.event.trigger(map, 'resize'); 
           var myOptions = { 
            zoom: 13, 
            center: new google.maps.LatLng(30.4900271, -90.4629746), 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
           }; 
           map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions); 
           marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(30.4900271, -90.4629746) }); 
           google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); 
           infowindow.open(map, marker); 
          }, 2500); 
          google.maps.event.addDomListener(window, 'load', init_map); 
          google.maps.event.trigger(map, 'resize'); 
         }); 

Answer 2

내가 지금 제공 할 수 모두에서 클릭을 추가하는 대신 <a>.

<button id="HmapModal" data-toggle="modal" data-target="HmapModal"></button> 

의 버튼을 몇 가지 정리 업 코드가 사용 , 얼마나 많은, 만약에 있다면, 그것은 당신을 얻을 것입니다 그러나 여기 있습니다.

<script type="text/javascript"> 
    var loc = new google.maps.LatLng(30.4900271, -90.4629746), 
     myOptions = { 
      zoom: 13, 
      center: loc, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }, 
     map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions), 
     marker = new google.maps.Marker({ 
      map: map, 
      position: loc 
     }); 

    function init_map() { 
     $("#hammondButton").click(function() { 
      google.maps.event.addListener(marker, "click", function() { 
       infowindow.open(map, marker); 
      }); 

      // is this necessary? 
      google.maps.event.trigger(map, 'resize'); 
     }); 

    } 

    window.addEventListener("load", init_map); 
</script>