在Google Map infowindow中顯示動態內容

Question

我使用以下網站生成了一個小工具：http://www.forecast.co.uk/widget/。

我在這裏有我當前的Google地圖代碼：http://jsfiddle.net/8gsqt7xv/。

但是，在我的最終版本中，而不是blah，我想包含該小部件。我試過&這裏沒有做到這一點：http://jsfiddle.net/8xvgdwzu/。 我該怎麼做？

下面是當前工作的代碼，而無需預測部件：

var geocoder = new google.maps.Geocoder(); 
 
    var marker; 
 
    var infoWindow; 
 
    var map; 
 

 
    function initialize() { 
 
     var mapOptions = { 
 
      zoom: 15, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
 
     mapOptions); 
 
     setLocation(); 
 
    } 
 

 
    function setLocation() { 
 
     var address = '2349 Marlton Pike W, Cherry Hill, NJ 08002'; 
 
     geocoder.geocode({ 
 
      'address': address 
 
     }, function (results, status) { 
 
      if (status == google.maps.GeocoderStatus.OK) { 
 
       var position = results[0].geometry.location; 
 
       marker = new google.maps.Marker({ 
 
        map: map, 
 
        position: position, 
 
        title: 'Venue Name' 
 
       }); 
 
       map.setCenter(marker.getPosition()); 
 

 
       var content = 'blah'; 
 
       infoWindow = new google.maps.InfoWindow({ 
 
        content: content 
 
       }); 
 

 
       google.maps.event.addListener(marker, 'click', function() { 
 
        infoWindow.open(map, marker); 
 
       }); 
 

 
       //infoWindow.open(map, marker); doesn't work 
 
       google.maps.event.trigger(marker, 'click'); //still doesn't work 
 
      } else { 
 
       // 
 
      } 
 
     }); 
 
    } 
 

 
    google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
    height: 150px; 
 
    margin: 10px 0; 
 
    color: #000; 
 
}

<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> 
 
<div id="map-canvas">&nbsp;</div>

謝謝

Answer 1

http://jsfiddle.net/wf9a5m75/8xvgdwzu/2/

var geocoder = new google.maps.Geocoder(); 
var marker; 
var infoWindow; 
var map; 

function initialize() { 
    var mapOptions = { 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 
    setLocation(); 
} 

function setLocation() { 
    var address = '2349 Marlton Pike W, Cherry Hill, NJ 08002'; 
    geocoder.geocode({ 
    'address': address 
    }, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     var position = results[0].geometry.location; 
     marker = new google.maps.Marker({ 
     map: map, 
     position: position, 
     title: 'Venue Name' 
     }); 
     map.setCenter(marker.getPosition()); 


     var content = document.createElement('div'); 
     var div = document.createElement('div'); 
     div.id = "c_050e3e9d159498c53e6f88b44fad6987"; 
     div.class = "normal"; 
     content.appendChild(div); 

     var h2 = document.createElement('h2'); 
     h2.style.color = "#000000"; 
     h2.style.margin = "0 0 3px"; 
     h2.style.padding = "2px"; 
     h2.style.font = "bold 13px/1.2 Verdana"; 
     h2.style.textAlign = "center"; 
     h2.style.width = "100%"; 
     div.appendChild(h2); 

     var a = document.createElement("a"); 
     a.href = "http://www.forecast.co.uk/largs.html"; 
     a.style.color = "#000000"; 
     a.style.textDecoration = "none"; 
     a.style.font = "bold 13px/1.2 Verdana"; 
     a.innerText = "Forecast Largs"; 
     div.appendChild(a); 

     var anotherDiv = document.createElement('div'); 
     anotherDiv.id = "w_050e3e9d159498c53e6f88b44fad6987"; 
     anotherDiv.class = "normal"; 
     anotherDiv.style.height = "100%"; 
     content.appendChild(anotherDiv); 

     var script = document.createElement('script'); 
     script.src = "http://www.forecast.co.uk/widget/loader/050e3e9d159498c53e6f88b44fad6987"; 
     content.appendChild(script); 

     infoWindow = new google.maps.InfoWindow({ 
     content: content 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.open(map, marker); 
     }); 

     //infoWindow.open(map, marker); doesn't work 
     google.maps.event.trigger(marker, 'click'); //still doesn't work 
    } else { 
     // 
    } 
    }); 
} 

initialize(); 
//google.maps.event.addDomListener(window, 'load', initialize);