[SOLVED] Exception in setTimeout callback: ReferenceError: google is not defined

Exception in setTimeout callback: ReferenceError: google is not defined

I think I have littered Stack Overflow with this same question over and over again. I have been trying to setup Geocomplete to work with my Meteor js app.

This same code runs very perfectly well on non Meteor apps, but it's just proving stubborn on Meteor js apps. Being revised after reading many suggestions on forums I came up with this code. Running it gave the error below.

Onrendered function code:

Template.geolayout.onRendered(function(){
    Meteor.setTimeout(function () {
        $(function () {
        $('body').append('<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA55ihs_QPBpO5r465dgdfg1TJ0FX4ofL8zk&libraries=places">');
        $('body').append('<script src="/js/jquery.geocomplete.js">');
        
            $("#geocomplete").geocomplete({
              map: ".map_canvas",
              details: "form",
              types: ["geocode", "establishment"],
            });

            $("#find").click(function(){
              $("#geocomplete").trigger("geocode");
            });
        });
    }, 200);
});

Blaze code

<template name="geolayout">
      <div class="map_canvas"></div>

    <form>
      <input id="geocomplete" type="text" placeholder="Type in an address" value="Empire State Bldg" />
      <input id="find" type="button" value="find" />

      <fieldset>
        <h3>Address-Details</h3>

        <label>Name</label>
        <input name="name" type="text" value="">

        <label>URL</label>
        <input name="url" type="text" value="">

        <label>Website</label>
        <input name="website" type="text" value="">
      </fieldset>
    </form>

</template>

Error on the console:

Exception in setTimeout callback: ReferenceError: google is not defined
    at GeoComplete.$.extend.initMap (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:397:22), <anonymous>:123:22)
    at GeoComplete.$.extend.init (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:397:22), <anonymous>:105:12)
    at new GeoComplete (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:397:22), <anonymous>:99:10)
    at HTMLInputElement.eval (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:397:22), <anonymous>:586:22)
    at Function.jQuery.extend.each (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:442:23)
    at jQuery.fn.jQuery.each (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:194:17)
    at $.fn.geocomplete (eval at <anonymous> (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:397:22), <anonymous>:582:19)
    at HTMLDocument.<anonymous> (http://localhost:3000/app/app.js?hash=a15884274aa7ef8a6a17bc31acbc671588e8bcb5:568:22)
    at fire (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:3201:30)
    at Object.self.add [as done] (http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:3247:7)

Solution

Just move the 2 scripts tags at the end of your main.html. This should work and makes your life more easier.

<body>
  {{> geolayout}}

  <script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places"></script>
  <script src="/js/jquery.geocomplete.js"></script>
</body>

Replace YOUR_KEY with your API key.