Google Map in Bootstrap Tab [英] Google Map in Bootstrap Tab

问题描述

我试图让Google地图出现在vanilla Bootstrap标签中。我建立了一个直接从Bootstrap文档取得的小提琴，Gmap脚本几乎完全像谷歌推荐的那样。

我将 map 对象转储到了console.dir，并且它已被正确初始化。在之前的项目中，我可以使用 resize 函数在标签中显示地图 - 但它似乎不适用于Bootstrap。

有没有人得到这个工作？

这里是通用的jsfiddle-- http://jsfiddle.net/B4zLe/4/

编辑：添加代码

JAVASCRIPT：

  var map; 
 
 jQuery（function（$）{
 $（document）.ready（function（）{
 var latlng = new google.maps.LatLng（-34.397,150.644）; 
 var myOptions = {
 zoom：8，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 console.dir（map）; 
 google.maps.event.trigger（map，'resize'）; $ b $（'a [href =＃profile]'）。on（'shown'，function（e）{
 google.maps.event.trigger（map，'resize'）） ; 
}）; 
}）; 
}）; 
  

HTML：

 < DIV> 
< div class =bs-docs-example> 
< ul id =myTabclass =nav nav-tabs> 
< li class =active>< a href =＃homedata-toggle =tab>主页< / a>< / li> 
< li>< a href =＃profiledata-toggle =tab>地图< / a>< / li> 
< / ul> 
< div id =myTabContentclass =tab-content> 
< div class =tab-pane fade in activeid =home> 
< p>粗牛仔布，你可能没有听说过牛仔短裤奥斯汀。 Nesciunt豆腐stumptown aliqua，复古合成器大师清洗。胡子陈腔滥调，威廉斯堡carles素食helvetica。 Reprehenderit屠夫复古keffiyeh dreamcatcher合成器。考斯比毛衣eu banh mi，qui irure terry richardson前鱿鱼。 Aliquip placeat丹参杀菌iphone。 Seitan aliquip quis羊毛衫美国服装，屠夫voluptate nisi qui。< / p> 
< / div> 
< div class =tab-pane fadeid =profile> 
< div id =map_canvas>< / div> 
< / div> 
< / div> 
  

解决方案

你有点过分乐观，调整大小事件。来自文档

• 调整大小：当div更改大小时，开发人员应该在地图上触发此事件：google.maps.event.trigger（map，'resize'）

换句话说，调整大小不会做任何像窗口大小映射的大小，但只会将大小调整到它所在的容器 - 在这种情况下，map_canvas DIV。但是，这个div没有尺寸，所以地图的大小为零。

由于您添加了一些侦听器来确保地图将更改为其父项的大小，因此是一个相当简单的修复 - 只需添加一些代码来修改父div到所需的大小，并且地图将调整大小。例如：

  $（＃map_canvas）。css（width，400）.css（height， 400）; 
  

会将其大小设为400x400。 下面是一个示例，您应该可以将其更改为任何您想要的内容。

I'm trying to get a Google Map to appear in a vanilla Bootstrap tab. I built a fiddle taken directly from the Bootstrap docs, with the Gmap script pretty much exactly like Google recommends doing it too.

I am dumping the map object to console.dir and it has been initialized properly. In earlier projects I'd been able to display maps in tabs using the resize function-- but it doesn't seem to work with Bootstrap.

Has anyone gotten this working?

Here's the generic jsfiddle-- http://jsfiddle.net/B4zLe/4/

EDIT: adding code

JAVASCRIPT:

var map;

jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        console.dir(map);
        google.maps.event.trigger(map, 'resize');

        $('a[href="#profile"]').on('shown', function(e) {
            google.maps.event.trigger(map, 'resize');
        });
    });
});

HTML:

<div>
<div class="bs-docs-example">
    <ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Map</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <div id="map_canvas"></div>   
    </div>
</div>

解决方案

You're a little overoptimistic in how powerful the "resize" event is. From the documentation:

• resize: Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize')

In other words, resize won't do anything fancy like size the map to the window, but will only size it to the container it's in - in this case, the "map_canvas" div. However, this div has no dimensions, so the map has zero size.

Since you added some listeners to ensure that the map will change to the size of it's parent, this is a pretty easy fix - just add some code to modify the parent div to the desired size, and the map will resize to it. For example:

$("#map_canvas").css("width", 400).css("height", 400);

will size it to 400x400. Here's an example, you should be able to change it to whatever you'd like.

这篇关于Google Map in Bootstrap Tab的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！