Question

我在基础选项卡中放置了一个谷歌地图，它加载为灰色而没有控件。如果我以任何容量调整浏览器大小，那么地图将正确显示，但我不知道如何在选择特定选项卡时刷新/调整地图大小。非常感谢所有帮助。

<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);
  }
}

并且最好将它放在脚本的末尾，但essentiel是在加载后触发组件上的resize事件，这将由该行完成。

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选项卡更改事件的方式：

  for(initialization; condition; updation)
    { 
    statement(s)
       }

Answer 4

我最近遇到过这个问题。它帮助我在单击选项卡时仅启动了Google地图;

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

});

基础选项卡和Google Map

4 个答案: