谷歌地圖 - API加載速度很慢

我的頁面已經加載谷歌地圖，但使用jquery我隱藏它。點擊按鈕，它應該顯示我的谷歌地圖加載在該頁面。但我無法看到完整的地圖，即。我只看到地圖的一部分。下面是我的代碼： -谷歌地圖 - API加載速度很慢

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style id="my-css"> 
map,div[map] { 
    display: block; 
    width: 600px; 
    height: 400px 
} 
</style> 
<script src="https://maps.google.com/maps/api/js?sensor=false"></script> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
<script src="scripts/plunkr.js"></script> 
<script src="scripts/app.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew"> </script> 

<script 
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
function initialize() 
{ 
var mapProp = { 
    center:new google.maps.LatLng(51.508742,-0.120850), 
    zoom:7, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<script> 
$(document).ready(function(){ 

$("#maps12").hide(); 
$("button").click(function(){ 
$("#maps12").show(); 
}); 
}); 
</script> 
<script src="../dist/ng-map.min.js"></script> 
</head> 

<body> 
    <div class="main"> 
     <header> 
     DEMO  
     </header> 
     <section> 
     <div id="maps12"> 
      <div id="map-canvas" style="width: 600px; height: 400px"></div> 
      </div> 
     </section> 
     <footer> 
     <button>click me</button> 
     </footer> 
    </div> 
</body> 
</html>

來源

2014-01-31 Nishan Shah

他們的指令適用於谷歌地圖AngularJS和UI地圖看@ 的http：//角谷歌-maps.org/和http://angular-ui.github.io/ui-map/ –

您使用窗口的onload事件加載谷歌地圖和一個隱藏的元素。然後你再次顯示它，所以地圖被卡住，以獲得調整大小。

所以，當你表現出的股利，谷歌地圖的trigger the resize事件像

$(document).ready(function() { 
    $("#maps12").hide(); 
    $("button").click(function() { 
     $("#maps12").show(); 
     google.maps.event.trigger(map, "resize"); 
    }); 
});

JSFiddle

來源

2014-01-31 05:41:53 Praveen

它仍然不工作的傢伙！我該怎麼辦？ –

@NishanShah我不明白什麼是不工作，看到這裏（[小提琴1]（http://jsfiddle.net/praveen_jegan/75TXq/1/））我已經轉載你的問題和解決我的答案。如果仍然存在，請創建一個小提琴，以便我可以幫助您。 – Praveen

它的工作完美，但加載時間更多...我該怎麼辦？ –

谷歌地圖 - API加載速度很慢

回答

相關問題