2012-08-18 1 views
0

Я использую API Карт Google для создания пользовательского InfoWindow, содержащего содержимое таблицы Fusion. Я также хочу встраивать контент с внешнего сайта в InfoWindow, но не могу заставить код работать. Код для вставки с внешним сайта:В том числе <script> элементов в пользовательских настройках

<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 следующим образом, с внешней URL и идентификатором ссылается в моей слитой таблице. Моя проблема в том, что я не могу заставить элемент inline </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>" 

    }); 

ответ

1

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

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

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

Вам необходимо использовать DOM-метод для ввода сценария и выполнить его, например. appendChild().

Fixed щелкать-обработчик:

//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); 

    }); 
+0

Это замечательно, спасибо. Работает отлично. – user1608180

0

выглядит как вам не хватает «'s в этой строке:

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

Update: Вы говорите это:

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

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

Update2: Не все маркеры/полигоны имеют значение в строке «IFPRI Ref2». Он работает, если я нажимаю на Бангладеш на this version of your map

+0

Спасибо, но боюсь, что это не сработало. Он уже давно втягивает во внешнюю таблицу стилей, но просто не выполняет внешний скрипт. – user1608180

+0

Можете ли вы предоставить ссылку на карту, которая представляет проблему или jsfiddle? Это должно сработать. – geocodezip

+0

https://dl.dropbox.com/u/541559/Fusion%20map%20test.html (вам нужно загрузить «небезопасный» контент в браузере). Спасибо – user1608180

Смежные вопросы