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

Question

I'd like to display Tide Times in an infowindow on my Google Map.

I have tried it with a Weather widget and it works great: http://jsfiddle.net/nvwjnrhy/

However, trying similar with Tide Times doesn't work: http://jsfiddle.net/nvwjnrhy/1/

Here's my current full code:

 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> 

Thank you for any help with this :)

Answer 1

I'm not sure adding what's essentially just a <script> tag as the content of an infowindow is going to work. Instead I think you'd need to add that script file into your page (perhaps hidden somehow), then read the content of that div, and add that into the infowindow's content. Something like:

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