zombie.js and Google Maps API

I'm having a problem with zombie.js testing framework and the Google Maps API.

I have a simple zombie.js that loads a home page and tries to click a Sign In link. However, when I look at what comes back for the home page HTML (from the perspective of the zombie.js browser object), I see only this in the body section:

<body>
  <script src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/12/main.js"     type="text/javascript"></script>
</body>

If I remove the Google Maps javascript from the original page, everything works fine and I get the full section. Requesting a different page that doesn't use maps API also works fine.

I see a related question here, but the workaround isn't fully described: https://github.com/assaf/zombie/issues/250

Can anyone help me with the full workaround to this?

Here is the zombie.js code in question:

suite('Zombie Sign In', function() {

    test('Home page should have sign-in link', function(done) {
        var browser = new Browser();
        browser.debug = true;
        browser.authenticate().basic(conf.basicAuth.username, conf.basicAuth.password);
        browser.visit(conf.baseURL, function(e, browser) {
            console.log(browser.html()); // here is where I get the empty body section
            browser.clickLink("Sign In", function() {
                browser.text("title").should.eql('my title');
                done();            
            });
        });
    });
});

I ran into this issue today - you just need to load the API asynchronously. This isn't so much a workaround as a documented alternative, which you can read up on here:

https://developers.google.com/maps/documentation/javascript/tutorial#asynch

Essentially you just need to change any code like this:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE" type="text/javascript"></script>
<script type="text/javascript">
  function initialize() {
    var map = new google.maps.Map(/* ... */);
  }

  window.onload = initialize();
</script>

To this (lifted almost entirely from the link above):

<script type="text/javascript">
  function initialize() {
    var map = new google.maps.Map(/* ... */);
  }

  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

The key thing to note here is that you have to pass a callback parameter to the script.src tag (in this example we provide initialize, but it can be whatever you want) - this will let google fire your initialisation code when the dynamically injected maps script tag has finished loading.

This second mechanism fixes my Zombie tests.