Google maps api 3 包括<；脚本>；自定义信息窗口中的元素

我正在使用GoogleMapsAPI创建一个包含fusion表内容的自定义信息窗口。我还想在InfoWindow中嵌入外部站点的内容，但无法使代码正常工作。外部站点的嵌入代码为：

    <link type="text/css" rel="stylesheet" media="all" href="http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css" />
<div class="web-widgets-inline" id="web_widgets_inline_country_news_36">
<script src="http://www.foodsecurityportal.org/country/widget/36"></script>
</div>

我正试图将它嵌入到我的InfoWindow中，如下所示，并在我的fusion表中引用外部URL和ID。我的问题是无法使内联

元素正常工作。将其完整地包含为

会阻止加载映射，同时尝试将其分解（例如

“

（如下面的代码片段中所示）会阻止嵌入的脚本运行

有什么想法吗？如果可能的话，请给我一个完整的解释，因为我是新手。非常感谢

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(10, 30),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setQuery("SELECT 'Country Geometry' FROM " + tableid);
  layer.setMap(map);

  layer2 = new google.maps.FusionTablesLayer(tableid2);
  layer2.setQuery("SELECT 'Site Location' FROM " + tableid2);
  layer2.setMap(map);


  google.maps.event.addListener(layer, 'click', function(e) {


e.infoWindowHtml = "<div class='googft-info-window' style='font-family: sans-serif; width: 500px; height: 300px; overflow: auto;'>"

e.infoWindowHtml += "<b>" + e.row['Site Name'].value + "</b><br />"

e.infoWindowHtml += "<img src=" + e.row['Image URL'].value + "><br />"

e.infoWindowHtml += "<link type=text/css rel=stylesheet media=all href=http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css />"

e.infoWindowHtml += "<div class=" + e.row['IFPRI Ref1'].value + " style='width: 95%; height: 150px; overflow: auto;'>"

e.infoWindowHtml += "<script src=" + e.row['IFPRI Ref2'].value + "type='text/javascript'><"+"/script>"

e.infoWindowHtml +=  "</div></div>"

  });

函数初始化（）{
map=new google.maps.map（document.getElementById（'map_canvas'）{
中心：新google.maps.LatLng（10,30），
缩放：2，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
layer=new google.maps.FusionTablesLayer（tableid）；
layer.setQuery（“从“+tableid”中选择“国家几何图形”）；
图层设置图（map）；
layer2=新的google.maps.FusionTablesLayer（tableid2）；
layer2.setQuery（“从“+tableid2”中选择“站点位置”）；
第2层。设置地图（地图）；
google.maps.event.addListener（层，'click'，函数（e）{
e、 infoWindowHtml=“”
e、 infoWindowHtml+=“”+e.row['Site Name'].value+“
”
e、 infoWindowHtml+=“
”
e、 infoWindowHtml+=“”
e、 infoWindowHtml+=“”
e、 infoWindowHtml+=“”
e、 infoWindowHtml+=“”
});

这行中似乎缺少“：

e.infoWindowHtml += "<link type=text/css rel=stylesheet media=all href=http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css />"

e.infoWindowHtml+=“”

应该是这样的：

e.infoWindowHtml += "<link type='text/css' rel=stylesheet media='all' href='http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css' />"

e.infoWindowHtml+=“”

更新： 你是这样说的：

e.infoWindowHtml += "<script src=" + e.row['IFPRI Ref2'].value + "type='text/javascript'><"+"/script>"

e.infoWindowHtml+=“”

不工作。为什么在信息窗口打开时需要包含它？为什么不将其作为页面的一部分（静态加载）包含？每个信息窗口的src是否不同

更新2：

---

并非所有标记/多边形的“IFPRI Ref2”行中都有值。如果单击“类型”属性前缺少空格，则src将被破坏，该选项将起作用

但空间并不能解决问题

我猜API使用innerHTML来设置内容。因此，可以将脚本元素注入infowindow，但它不会执行

您需要使用DOM方法注入脚本并执行它，例如

appendChild（）

固定点击处理程序：

//add a click listener to the layer

  google.maps.event.addListener(layer, 'click', function(e) {

e.infoWindowHtml = "<div id='someID' class='googft-info-window' style='font-family: sans-serif; width: 500px; height: 300px; overflow: auto;'>\
                   <b>" + e.row['Site Name'].value + "</b><br />\
                   <img src=" + e.row['Image URL'].value + "><br />\
                   <link type=text/css rel=stylesheet media=all href=http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css />\
                   <div class=" + e.row['IFPRI Ref1'].value + " style='width: 95%; height: 150px; overflow: auto;'>\
                   </div></div>";

      //append the script to the body, it doesn't matter where you place it
        var script=document.createElement('script');
            script.setAttribute('src',e.row['IFPRI Ref2'].value);
            document.getElementsByTagName('body')[0].appendChild(script);

  });

//将单击侦听器添加到层
google.maps.event.addListener（层，'click'，函数（e）{
e、 infoWindowHtml=”\
“+e.row['Site Name'].value+”
\

\
\
\
";
//将脚本附加到正文中，放置在何处并不重要
var script=document.createElement（'script'）；
script.setAttribute（'src'，e.row['IFPRI Ref2'].value）；
document.getElementsByTagName（'body'）[0].appendChild（脚本）；
});

谢谢，但恐怕这不起作用。它已经成功地拉入了外部样式表，但只是没有执行外部脚本。你能提供一个指向显示问题的映射或JSFIDLE的链接吗？这应该行得通。（你需要在浏览器中加载“不安全”的内容）.Thanks实际上，每个国家/地区都有不同的src链接，每个链接都在单独的fusion表行中指定（尽管更改的只是URL的最后一部分）例如，“IFPRI Ref2”可能会调用或取决于打开infoWindow的地图位置。该脚本的作用是什么？它是否需要访问infoWindow DOM中的元素？