在选项卡中打开时将gMaps置于中心位置

时间:2014-06-12 12:41:53

标签: javascript jquery wordpress google-maps

我在wordpress的标签页中使用gMaps。我可以显示地图,但是当单击选项卡时,地图不会以其标记为中心。

gMap代码

 jQuery(document).ready(function($) {
    $("#tb_gmap_<?php echo $id; ?>").gMap({
        maptype: "<?php echo $maptype; ?>",
        zoom: <?php echo $zoom; ?>,
        markers: [
            {
                address: "<?php echo $address; ?>",
                popup: <?php echo $popup; ?>,
                html: "<?php echo $html; ?>"
            }
        ],
        controls: {
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: false,
            overviewMapControl: false
        }
    });
});

用于重新制作地图的HTML

<div id="tb_gmap_<?php echo $id; ?>" class="themeblvd-gmap" style="<?php echo $styles; ?>"></div>

jQuery刷新地图

 // refresh google map
    tab_content.children('li[data-tab="' + data_tab + '"]').find('iframe[src^="https://www.google.com/maps"], iframe[src^="http://www.google.com/maps"]').each(function(){
        this.src = this.src;
        jQuery(this).css('opacity','0');
        jQuery(this).delay(400).animate({'opacity': '1'}, 500);
    });
    tab_content.children('li[data-tab="' + data_tab + '"]').find('.themeblvd-gmap').each(function(){
    google.maps.event.trigger(this, 'resize');
            });


    e.preventDefault();
});

请帮忙

2 个答案:

答案 0 :(得分:0)

  // put this after map get refreshed

  // give marker latitude and longitude here 
  map.setCenter(latitude,longitude);

答案 1 :(得分:0)

试试这个:

// refresh google map
tab_content.children('li[data-tab="' + data_tab + '"]').find('iframe[src^="https://www.google.com/maps"],  iframe[src^="http://www.google.com/maps"]').each(function () {
    this.src = this.src;
    jQuery(this).css('opacity', '0');
    jQuery(this).delay(400).animate({
        'opacity': '1'
    }, 500);
});
tab_content.children('li[data-tab="' + data_tab + '"]').find('.themeblvd-gmap').each(function () {
    var c = this.getCenter();
    google.maps.event.trigger(this, 'resize');
    this.setCenter(c);
});
e.preventDefault();