Including [removed] elements in a custom infowindo

问题:

I am using the Google Maps API to create a custom InfoWindow that contains fusion table content. I also want to embed content from an external site in the InfoWindow, but cannot get the code to work. The embed code from the external site is:

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

I am trying to embed it into my InfoWindow as follows, with the external URL and ID referenced in my fusion table. My problem is that I cannot get the inline </script> element to function. Including it in full as </script> prevents the map from loading at all, whilst trying to break it up (e.g "<"+"/script>" (as in the below snippet) prevents the embedded script from running.

Any ideas? Please give a full explanation if possible as I'm a novice. Many thanks.

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:

There is a space missing before the type-attribute, the src is broken.

But the space wouldn't solve the problem.

I guess the API is using innerHTML to set the content. Therefore the script-element could be injected into the infowindow, but it doesn't execute.

You need to use a DOM-method to inject the script and execute it, e.g. appendChild() .

Fixed click-handler:

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

  });

回答2:

looks like you are missing "'s in this line:

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

should be something like:

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: You are saying this:

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

isn't working. Why do you need to include it when the infoWindow opens? Why not just include it as part of the page (statically loaded)? Is the src different for each infoWindow?

Update2: Not all of the markers/polygons have a value in the row "IFPRI Ref2". It works if I click on Bangladesh on this version of your map