Bootstrap 模态外部 URL 谷歌地图答案

【问题标题】：Bootstrap Modal Extetnal URL google MapBootstrap 模态外部 URL 谷歌地图
【发布时间】：2014-07-15 22:54:07
【问题描述】：

我有一个 SearchGoogle html 页面，它打开了一个谷歌地图。我想通过单击按钮将此 html 文件加载到模式对话框中。

在我的主 index.jsp 页面上定义了一个模式，并引用了 SearchGoogle.html。内容不加载。任何帮助？下面的页面是我想在模态对话框中加载的远程页面。已经尝试远程内容加载。它不工作

<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/googleMap.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="type-selector" class="controls">
    <input type="radio" name="type" id="changetype-all" checked="checked">
    <label for="changetype-all">All</label> <input type="radio"
        name="type" id="changetype-establishment"> <label
        for="changetype-establishment">Establishments</label> <input
        type="radio" name="type" id="changetype-geocode"> <label
        for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>

【问题讨论】：

请出示您的标记。您是否使用远程方法来加载模态内容？请阅读：getbootstrap.com/javascript/#modals 在选项的子标题下，有一个表格解释了远程选项并描述了从单独的 html 页面加载内容的正确方法。
请找到已编辑的代码。这是我想在模态对话框中加载的 remote.html。基本上它是一个谷歌地图 html。页面没有在模态中加载

标签： twitter-bootstrap-3 modal-dialog

【解决方案1】：

如果你查看load method in the jQuery API doc，它说加载方法使用innerHTML来解析要加载的页面并且：

在这个过程中，浏览器经常会过滤掉文档中的元素，比如<html>， <title> 或 <head> 元素。

我建议将googleMap.css 放在模态页面上，并将上面页面中的脚本移动到正文标记，如下所示：

要加载的页面的 HTML（我称之为 remote.html）：

<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
</head>
<body>
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Google Map Modal Title</h4>
  </div>
  <div class="modal-body">
    <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
    <div id="type-selector" class="controls">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label> <input type="radio"
        name="type" id="changetype-establishment"> <label
        for="changetype-establishment">Establishments</label> <input
        type="radio" name="type" id="changetype-geocode"> <label
        for="changetype-geocode">Geocodes</label>
    </div>
    <div id="map-canvas"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</body>
</html>

模态页面的 HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Add the googleMap.css on this page -->
    <link rel="stylesheet" type="text/css" href="css/googleMap.css">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- The contents of remote.html will be injected here.  Don't forget to wrap your content in the modal-header, modal-body, and modal-footer classes! -->  
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

【讨论】：

是的。那成功了。我让它至少以模态加载它，但地图似乎根本没有加载。（只有文本框和收音机加载）。可能是调整大小有问题吗？
你能让地图自己加载吗？我的意思是直接加载页面？
是的。我可以毫无问题地运行地图。在这里发布 JS。