Display dynamic content in Google Map infowindow

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

I'm sorry, I don't understand the question. You can find the one line of code needed to display Tide Times here: https://www.tidetimes.org.uk/widgets. Does this help? :) — michaelmcgurk, Mar 11 '16 at 07:28
I hear `postscribe` may be a useful tool for this issue, but I'm not entirely sure how I would use it in this instance https://github.com/krux/postscribe — michaelmcgurk, Mar 11 '16 at 07:37
I see this in the log `Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.` — geocodezip, Mar 11 '16 at 15:33
related question: [Execute write on doc: It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.](http://stackoverflow.com/questions/24297829/execute-write-on-doc-it-isnt-possible-to-write-into-a-document-from-an-asynchr) — geocodezip, Mar 11 '16 at 15:35

score 1 · Accepted Answer · answered Mar 11 '16 at 09:20

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

answered Mar 11 '16 at 09:20

duncan

31,401
13
78
99

Many thanks for this, Duncan. I will take a look and try this shortly :) – michaelmcgurk Mar 11 '16 at 09:21
When I try that code, I get the following message: `Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.` – michaelmcgurk Mar 11 '16 at 11:41
1

So don't load that JS file asynchronously, just do ` – duncan Mar 11 '16 at 13:07
Can you possibly show me how to get this working using my JSFiddle as a base? I'm sorry I'm quite new to JS and struggling. Really appreciate the help :) – michaelmcgurk Mar 11 '16 at 15:41

Display dynamic content in Google Map infowindow

1 Answers1