title: Embedding weather widget into info window of Google map
body: <p>I am trying to embed a weather widget from <a href="http://www.weather.com/services/oap/weather-widgets.html" rel="nofollow">http://www.weather.com/services/oap/weather-widgets.html</a> into an Info Window of a Google map, such that when I click on a marker, the weather widget is open in the Infowindow.</p>
  
  <p>The code for embedding the weather widget is as follows (for San-Francisco, CA):</p>
  
  
  
  <p>and it works fine when I put it into HTML:<div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style="width:270px;height:175px;border:1px solid blue;padding:10px"&gt;
  &lt;script type="text/javascript" src="http://voap.weather.com/weather/oap/USCA0987?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget"&gt;&lt;/script&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, when I try to use it in the following code that is supposed to show the widget in the InfoWindow on the Google map it does not work:<div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;&lt;head&gt;
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function initialize() {
  var cpoint = new google.maps.LatLng(37.770728 ,-122.458199 );
  var mapOptions = {
  zoom: 4,
  center: cpoint,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  var infowindow = new google.maps.InfoWindow();
  
  var info1 = '&lt;div style="width:270px;height:175px;border:1px solid blue;padding:10px"&gt;&lt;script type="text/javascript" src="http://voap.weather.com/weather/oap/USCA0987?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget"&gt;&lt;/script&gt;&lt;/div&gt;';
  
  var point1 = new google.maps.LatLng(37.770728 ,-122.458199 );
  var marker1 = new google.maps.Marker({
  position: point1 ,
  map: map,
  title: "Click here for details"
  });
  google.maps.event.addListener(marker1 , "click", function() {
  infowindow.setContent(info1 );
  infowindow.open(map,marker1 );
  });
  }google.maps.event.addDomListener(window, "load", initialize);
  &lt;/script&gt;
  &lt;/head&gt;&lt;body&gt;
  &lt;div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"&gt;&lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>All I do is I put that div into info1 Javascript variable. I am not sure whether I do anything wrong, or InfoWindow does not allow to do that.</p>