Включение элементов <script> в пользовательское информационное окно

Question

Я использую Google Maps API для создания собственного окна InfoWindow, содержащего содержимое таблицы слияния. Я также хочу встраивать контент с внешнего сайта в 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>

Я пытаюсь встроить его в мое информационное окно следующим образом, используя внешний URL-адрес и идентификатор, указанные в моей таблице слияния. Моя проблема в том, что я не могу получить встроенный </script> элемент для функционирования. В том числе и в полном объеме </script> предотвращает загрузку карты при попытке ее разбить (например, "<"+"/script>" (как в приведенном ниже фрагменте) предотвращает запуск встроенного сценария.

Есть идеи? Пожалуйста, дайте полное объяснение, если это возможно, так как я новичок. Большое спасибо.

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>"

  });

Answer 1

Перед атрибутом type отсутствует пробел, src не работает.

Но пространство не решит проблему.

Я предполагаю, что API использует innerHTML для установки содержимого. Поэтому элемент script может быть введен в информационное окно, но он не выполняется.

Вам нужно использовать 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);

  });

Answer 2

Похоже, вы пропустили "в этой строке:

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 += "<link type='text/css' rel=stylesheet media='all' href='http://www.foodsecurityportal.org/sites/all/modules/tic_countries/tic_countries_widget.css' />"

Обновление: Вы говорите это:

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

не работает Зачем вам нужно включать его, когда открывается информационное окно? Почему бы просто не включить его как часть страницы (статически загруженную)? Отличен ли src для каждого окна информации?

Обновление 2: Не все маркеры / полигоны имеют значение в строке "IFPRI Ref2". Это работает, если я нажму на Бангладеш на этой версии вашей карты