基础选项卡和 Google 地图

Question

我将 google 地图放在基础选项卡中，它加载为灰色且没有控件。如果我以任何容量调整浏览器的大小，那么地图将正确显示，但我不知道如何在选择特定选项卡时将其显示到 refresh/resize 地图。非常感谢所有帮助。

<style>
    #propertymap {
        width: 100%;
        height:480px;
    }

</style>

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Pictures</a></li>
  <li class="tab-title"><a href="#panel2">Virtual Walkthrough</a></li>
  <li class="tab-title"><a href="#panel3">Map</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Pictures</p>
  </div>
  <div class="content" id="panel2">
  <p>Virtual Walkthrough</p>
  </div>
  <div class="content" id="panel3">
    <div id="propertymap"></div>
    <script>
    var latitude={tag_latitude}, //the tag is for the business catalyst web app 
        longitude={tag_longitude};

    var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('propertymap'), {
    center: {lat: latitude, lng: longitude},
    zoom: 15
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: latitude, lng: longitude}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
</script>
<style>
    #propertymap {
        width: 100%;
        height:480px;
    }

</style>

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Pictures</a></li>
  <li class="tab-title"><a href="#panel2">Virtual Walkthrough</a></li>
  <li class="tab-title"><a href="#panel3">Map</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Pictures</p>
  </div>
  <div class="content" id="panel2">
  <p>Virtual Walkthrough</p>
  </div>
  <div class="content" id="panel3">
    <div id="propertymap"></div>
    <script>
    var latitude={tag_latitude}, //the tag is for the business catalyst web app 
        longitude={tag_longitude};

    var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('propertymap'), {
    center: {lat: latitude, lng: longitude},
    zoom: 15
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: latitude, lng: longitude}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
</script>



  </div>
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap"></script>

  </div>
</div>

http://vprintz.businesscatalyst.com/property-list/4-bay-meadows 是它在网站上的显示方式

Answer 1

我之前遇到过同样的问题，我通过添加这段代码修复了它

 function initMap() {
  var map = new google.maps.Map(document.getElementById('propertymap'), {
    center: {lat: latitude, lng: longitude},
    zoom: 15
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: latitude, lng: longitude}
  });
  marker.addListener('click', toggleBounce);

  jQuery('document').ready(function(){ 
     google.maps.event.trigger(map,'resize',{});
  });

}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

最好将它放在脚本的末尾，但关键是在加载后触发组件上的调整大小事件，这将由该行完成。

Answer 2

这是我最终采用的解决方案：

<script>
var latitude={tag_latitude}, //the tag is for the business catalyst web app 
    longitude={tag_longitude};

var marker;

function initMap() {
   var map = new google.maps.Map(document.getElementById('propertymap'), {    
   //change propertymap to your map id
   center: {lat: latitude, lng: longitude},
   zoom: 15 //set to preferred zoom level
});

marker = new google.maps.Marker({
   map: map,
   draggable: true,
   animation: google.maps.Animation.DROP,
   position: {lat: latitude, lng: longitude}
 });

 marker.addListener('click', toggleBounce); //for marker drop animation, can be removed

jQuery('#panel3').on('toggled', function(){ //change #panel3 to your tab id
    var center = new google.maps.LatLng(latitude, longitude);
    map.setCenter(center); //must recenter map after tab loads
    google.maps.event.trigger(map,'resize',{});
 });

}

function toggleBounce() { // for marker drop animation, can be removed
 if (marker.getAnimation() !== null) {
   marker.setAnimation(null);
 } else {
 marker.setAnimation(google.maps.Animation.BOUNCE);
 }
}
</script>

Answer 3

这就是我使用 Foundation 选项卡更改事件的方式：

var map = null;
$('[data-tabs]').on('change.zf.tabs', function () {
    // check that user selected Map tab for the first time
    // if yes then load and show Google map 
    // let's assume map is located in Tab#2, thus we need Tab with index of 1
    if (!map && $('.tabs-title.is-active').index() == 1) {   // change "1" to your tab# + 1
        // create your map here
        map = new google.maps.Map(document.getElementById('divMap'));
        // add map markers and so on...                
    }

    // optional: if you have Foundation equalizer plugin on the page 
    // then uncomment line below to reInit the plugin 
    // Foundation.reInit('equalizer');
});

Answer 4

我最近一直遇到这个问题。它帮助我在单击选项卡时仅启动一次 Google 地图；

    $('#tabWithMap').one('click', function(){
//create map and markers etc.

});

基础选项卡和 Google 地图

Foundation tabs and Google Map

javascript

google-maps

google-maps-api-3

zurb-foundation