在Google地图信息窗口中显示动态内容

Question

我使用此网站生成了一个小部件：http://www.forecast.co.uk/widget/。

我目前使用的是Google地图代码：http://jsfiddle.net/8gsqt7xv/。

但是，在我的最终版本中，我不想使用blah，而是希望包含小部件。我试过＆amp;在这里没有这样做：http://jsfiddle.net/8xvgdwzu/。 我该怎么做？

这是当前的工作代码，没有预测窗口小部件：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

谢谢

Answer 1

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