0

jQuery コードで非表示になっているタブに (V3 API を使用して) Google マップを読み込もうとしています。これが行われるときはいつでも、地図は地図の代わりにいくつかの灰色の四角形を示し、別の場所の地図も示します。

これを修正するコードをいくつか見つけました。これは次のとおりです。

しかし、これをコードのどこに配置すればよいかわかりません。

これは、マップの現在のコードです (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");」でこれを解決するのにこれほど近づいているように感じます。どうすればよいかわかりませんこれ。

どんな助けでも感謝します、ありがとう。

4

1 に答える 1

1

これは、非表示の Google マップを初期化すると発生します。

次の 2 つのオプションがあります。

  • google.maps.event.trigger(map, "resize"); を呼び出します。新しいタブを表示したとき
  • タブの読み込み時に Google マップを初期化する

どちらでも問題なく動作するはずです。パフォーマンスには 2 番目の方が適していますが、最初のほうがやり直しが少なくて済みます。

于 2013-02-15T08:16:00.310 に答える