谷歌地图 - 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加载速度很慢

回答

相关问题