마우스 오버시 동적으로 생성 된 Google지도는 처음에만 올바르게 표시됩니다.

Question

PHP 파일의 coorinate로 Google지도 폴리 라인을 만듭니다. 마우스를 올리면 div가지도에 표시됩니다. 처음으로 커서로 입력하면지도가 올바르게 표시되지만 두 번째 시간에는 폴리선이 그리기 +지도가 div보다 작습니다. 코드 :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 

<script type="text/javascript"> 

    $(document).ready(function(event) { 

     $(".testhover").on('mouseover', function(e) { 

      $.ajax({ 
       type: "POST", 
       url: 'Paten/ajaxtest', 
       dataType: 'json', 
       data: {routeid: this.value}, 
       success: function(response) { 

        var mapOptions = { 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
        var map = new google.maps.Map(document.getElementById('map-canvas'), 
          mapOptions); 

        // coordinates 
        var coordinates = []; 

        for (i = 0; i < response.length; i++) { 
         var point = new google.maps.LatLng(response[i].lat, response[i].lon); 
         coordinates.push(point); 
        } 


        var Route = new google.maps.Polyline({ 
         path: coordinates, 
         geodesic: true, 
         strokeColor: '#FF0000', 
         strokeOpacity: 0.7, 
         strokeWeight: 4 
        }); 

        var bounds = new google.maps.LatLngBounds(); // set bounds 
        for (var i = 0; i < coordinates.length; i++) { 
         bounds.extend(coordinates[i]); 
        } 
        bounds.getCenter(); 
        map.fitBounds(bounds); 
        Route.setMap(map); 

        $('#map-canvas').show(); 
        $('#map-canvas').css({ 
         top: (e.pageY) + "px", 
         left: (e.pageX) + "px" 
        }); 
       } 
      }) 



     }) 

     $(".testhover").on('mouseout', function() { 

      $("#map-canvas").hide(); 
     }) 

    }); 
</script> 

HTML은

<style type="text/css"> 

    #map-canvas{ 
     display: none; 
     position: absolute; 
     width: 400px; 
     height: 400px; 
     padding: 10px; 
     background-color: grey; 
    } 

</style> 


<div > 
    <button id="447" value="447" class="testhover">Hover 1</button> 
    <button id="449" value="449" class="testhover">Hover 2</button> 
</div> 

<div id="map-canvas" ></div> 

내가 잘못 여기서 뭐하는 거지? 고맙습니다 !

Answer 1

문제가 해결되었습니다. 나는 이유를 모른다. 그러나 나는 움직일 필요가 있었다.

   $('#map-canvas').show(); 
       $('#map-canvas').css({ 
        top: (e.pageY) + "px", 
        left: (e.pageX) + "px" 
       }); 

"성공"이후의 것으로 나타났다.