Google지도는 jQuery 탭에로드 할 때 회색 사각형을 표시합니다.

Question

V3 API를 사용하여 Google지도를 jQuery 코드로 숨겨진 탭에로드하려고합니다. 이 작업이 완료되면지도에지도 대신 회색 사각형이 표시되고 다른 위치에지도가 표시됩니다.

이 문제를 해결할 수있는 코드를 찾았습니다. google.maps.event.trigger (map, "resize");

하지만이 코드를 어디에 두어야하는지 잘 모릅니다.

이지도에 내 현재 코드 (PHP를 무시 :))

<div id="map" style="width: 500px !important; height: 400px !important;"></div> 

    <script type="text/javascript"> 

    var locations = [ 
    <?php while ($connected->have_posts()) : $connected->the_post(); ?> 
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10], 
    <?php endwhile; ?> 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: new google.maps.LatLng(52.207607, 5.603027), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 



    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
    </script> 
    <?php 
    // Prevent weirdness 
    wp_reset_postdata(); 

    endif; 
    ?> 

입니다 그리고 이것은 다른 탭에 대한 jQuery를하다 :이 요청 된 알

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    //When page loads, hide all content 
    jQuery(".tab_content").hide(); 
    jQuery(".tab_content:first").show(); //Show first tab content 
    jQuery("#tabs li:first").addClass("active").show(); //Activate first tab 
    //On Click Event 
    jQuery("#tabs a").click(function() { 

     //Remove any "active" class 
     jQuery("#tabs .active").removeClass("active"); 

     //Add "active" class to selected tab 
     jQuery(this).parent().addClass("active"); 

     // Hide all tab content 
     jQuery(".tab_content").hide(); 

     //Find the href attribute value to identify the active tab + content 
     var a = jQuery(this).attr("href"); 

     //Fade in the active ID content 
     jQuery(a).fadeIn(); 




     return false; 
    }); 
}); 
</script> 

전에 'google.maps.event.trigger (map, "resize");'를 사용하여이 문제를 해결하는 것처럼 느껴졌습니다.이 작업을 어떻게 처리해야할지 모르겠습니다.

감사합니다. 감사드립니다.

Answer 1

Google지도가 숨겨진 상태에서 초기화하는 경우 발생합니다.

당신은 두 가지 옵션이 있습니다 : ("크기 조정"지도)

• 통화 google.maps.event.trigger을; 새 탭을 표시 할 때 탭이
를로드 할 때
• 구글 맵을 초기화한다

하나는 잘 작동합니다; 두 번째는 성능면에서 바람직하지만 첫 번째 모델은 재 작업이 덜 필요합니다.