javascript - 在 Google map 信息窗口中显示动态内容

Question

我想显示Tide Times在我的 Google map 上的信息窗口中。

我已经用天气小部件尝试过，效果很好:http://jsfiddle.net/nvwjnrhy/

但是，尝试与 Tide Times 类似的方法不起作用:http://jsfiddle.net/nvwjnrhy/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 script = document.createElement('script');
			script.src = "https://www.tidetimes.org.uk/grimsby-tide-times.js";
			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);

html, body {
  width: 100%;
  height: 100%;
}
#map-canvas {
    width: 100%;
    height: 100%;
    margin: 10px 0;
    color: #000;
}

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

感谢您对此提供的任何帮助:)

Answer 1

我不确定添加的内容本质上只是 <script>标签作为信息窗口的内容将起作用。相反，我认为您需要将该脚本文件添加到您的页面中(可能以某种方式隐藏)，然后读取该 div 的内容，并将其添加到信息窗口的内容中。像这样的东西:

var script = document.createElement('script');
    script.src = "https://www.tidetimes.org.uk/grimsby-tide-times.js";
    $('#someDiv').appendChild(script);

infoWindow = new google.maps.InfoWindow({
    content: $('#someDiv').html();
});