JQuery谷歌地图插件不呈现基本地图

Question

我试图重新创建JQuery Google地图演示页面，页面呈现地图框，但地图本身没有显示出来。

<script type="text/javascript"> 
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 }; 

$('#basic_map').live('pageinit', function() { 
    demo.add('basic_map', function() { 
     $('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() { 
      var self = this; 
      self.addMarker({'position': this.get('map').getCenter() }).click(function() { 
       self.openInfoWindow({ 'content': 'Hello World!' }, this); 
      }); 
     }}); 
    }).load('basic_map'); 
}); 

$('#basic_map').live('pageshow', function() { 
    demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map'); 
}); 

这是div进一步下跌的index.html页面

<div id="basic_map" data-role="page"> 
<div data-role="header"> 
    <h1><a data-ajax="false" href="/">maps page</a> examples</h1> 
    <a data-rel="back">Back</a> 
</div> 
<div data-role="content"> 
    <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
     <div id="map_canvas" style="height:350px;"></div> 
    </div> 
</div> 

，如果有帮助，这是我的index.html的头

<meta name="viewport" content="width=device-width, initial-scale=1">  
<title>FTF</title> 
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery-1.6.4.min.js"></script> 
<script src="js/config.js"></script> 
<script src="js/jquery.mobile-1.0rc1.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script> 
<script type="text/javascript" src="js/demo.js"></script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(removed)&sensor=false"> 

谢谢。

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>FTF</title> 
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery-1.6.4.min.js"></script> 
<script src="js/config.js"></script> 
<script src="js/jquery.mobile-1.0rc1.min.js"></script> 
<scripttype="text/javascript" charset="utf-8" src="js/phonegap.js"></script> 
<script type="text/javascript" src="js/demo.js"></script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(removed)&sensor=false"> 

您还没有三个文件，这有以下几种：

<script type="text/javascript" src="../ui/jquery.ui.map.js"></script> 
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script> 
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>