Google Maps和Jquery Mobile无法一起使用

Question

这是我第一次使用jQuery和Google Maps。 这样，我从字面上复制并粘贴了Google Maps hello世界页面，并包括jQuery Mobile，而我只是得到一个空白页面，上面写着“正在加载”。 我准备好不确定为什么吗？

HTML和JS：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mystyles.css">
    <link rel="stylesheet" href="css/jquery.mobile.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.structure.css"/>

    <script type="text/javascript" 
      src="https://maps.googleapis.com/maps/api/js?key=[key]&sensor=true">
    </script>

    <script type="text/javascript"  src="js/myscript.js"></script>
    <script type="text/javascript"  src="js/cordova-2.3.0.js"></script>

    <script type="text/javascript">
          function initialize()
          {
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
          }
    </script>


  </head>
  <body onload="initialize()">
      <div id="map-canvas"></div>
  </body>
</html>

上面写着MYAPIKEY的地方，我把钥匙放在那儿了。 我不确定它们是如何分裂的？？

UPDATE

将代码更改为上述代码。 当我删除指向我的jQuery Mobile文件的链接时，一切都正常加载...

Answer 1

检查此工作演示

1. google.maps.event.addDomListener（窗口，“加载”，初始化）； 不需要。 在这里，您在窗口加载事件上添加了一个侦听器，并告诉它调用initialize。 但是，您不提供任何初始化函数。 无论如何，您已经使用jqm提供了一个事件侦听器（pageinit或pageshow）。
2. 您没有为容器提供高度。 尽管您的容器在其父容器的旁边将具有宽度，但不会有任何高度。 因此，即使地图正确加载，它也不会出现。
3. 您尝试在包含jquery和jquery mobile之前使用它们。 您首先包含然后使用。

Answer 2

我建议使用pageshow事件而不是pageinit，因为后者在页面生命周期中还为时过早

$(document).on('pageshow', ...); 

还要避免在地图画布中使用自闭标签

<div id="map-canvas"></div>