帶有jQuery UI 1.10.x的Google Maps 3.x問題

我已經用Master \ Child頁面配置創建了一個測試ASP.Net 4.0應用程序，以測試我們主應用程序的一些必需的增強功能。我需要能夠將一個谷歌地圖放入一個jQuery UI選項卡控件中。它不會是生產版本中的第一個選項卡，因此我在測試應用程序中創建了一個帶有兩個選項卡的選項卡控件，並將該地圖放在第二個選項卡中。無論我做了什麼，我都無法讓地圖在第二個標籤中正確顯示。作爲測試，我將地圖（只是jQuery攻擊的div id =「map-canvas」）移動到第一個選項卡和walla - 一切正常 - 甚至在更改選項卡並返回之後。谷歌搜索周圍一噸，但無法找到這一個決議。這裏是地圖中的第一個標籤工作：帶有jQuery UI 1.10.x的Google Maps 3.x問題

enter image description here

這裏是放置在第二個選項卡不工作時相同的地圖： enter image description here

這裏是代碼：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">  
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=MyAPIKey&sensor=false"> 
</script> 
<link href="App_Themes/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
<h2>Map in Tab Control</h2> 
<div id="mapTabs"> 
    <ul> 
     <li><a href="#a">Tab-1</a></li> 
     <li><a href="#b">Tab-2</a></li> 
    </ul> 
    <div id="a"><h2>This is the first tab</h2>    
    </div> 
    <div id="b"><h2>This is the second tab</h2>   
     <div id="map-canvas" style="min-width:300px; min-height:300px;"></div> 
    </div> 
</div>

<script src="Scripts/jquery.ui.core.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.ui.widget.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.ui.tabs.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    function initialize(lt, ln) { 
     var latlng = new google.maps.LatLng(lt, ln); 
     var map = new google.maps.Map(
     document.getElementById('map-canvas'), { 
      center: new google.maps.LatLng(lt, ln), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      title: "Test Pin" 
     }); 
     marker.setMap(map); 
    } 

    $(document).ready(function() { 
     $("#mapTabs").tabs(); 
     var addr = '2626 East Oakland Park Blvd Oakland Park, FL 33306'; 
     var gc = new google.maps.Geocoder(); 
     var lat; 
     var lon; 
     gc.geocode({ 'address': addr }, function (results, status) { 
      lat = results[0].geometry.location.lat(); 
      lon = results[0].geometry.location.lng(); 
      initialize(lat, lon); 
     }); 
    }); 
</script> 
</asp:Content>

來源

2013-07-22 Jim Evans

我知道這是舊的文章，但在這裏是給其他人用類似的問題：

你需要調用地圖的初始化函數。由於你使用jQuery，這應該工作：

$("#b").click(function() { 
initialize(); 
});

來源

2014-03-05 16:20:21 jmiller

帶有jQuery UI 1.10.x的Google Maps 3.x問題

回答

相關問題