將Google地圖嵌入jQuery Mobile頁面

我想要做的就是在jQuery移動頁面的內容標記中嵌入護目鏡地圖，並且無法將其顯示在頁面上。我猜這是一個小錯誤，但我一直在摔跤這一段時間，任何幫助，將不勝感激。將Google地圖嵌入jQuery Mobile頁面

<head> 
    <style type="text/css"> 
     #map_canvas { 
      height: 256px; 
      width: 384px; 
      margin-top: 0.6em; 
     } 
    </style> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="fbObj1.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
    /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
</head> 

<body> 
    <script type="text/javascript"> 
     geocoder = new google.maps.Geocoder(); 
     var map = new google.maps.Map($("div#map_canvas"), { 
      center: new google.maps.LatLng(37.371940, -122.116470), 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     map.index = 2; 
    </script> 
    <div data-role="page"> 
     <div data-role="header"></div> 
     <div data-role="content"> 
      <div id="map_canvas"></div> 
     </div> 
     <div data-role="footer" data-position="inline"></div> 
    </div> 
</body>

來源

2012-04-12 Ben Pearce

$（不需要DIV＃$（「＃map_canvas」的）就足夠了 – 2012-04-12 07:06:30

感謝您的答覆但我實現了你的建議，地圖仍然沒有出現。 – 2012-04-12 07:23:32

下面的代碼爲我工作

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script> 
<script type="text/javascript">  
    function initialize() { 
     var myOptions = { 
      center: new google.maps.LatLng(37.371940, -122.116470),   
      zoom: 11,   
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     };   
     var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    }  
</script> 

<body onload="initialize()">

來源

2012-04-12 07:38:48

將Google地圖嵌入jQuery Mobile頁面

回答

相關問題