2017-05-26 67 views
0

我想我一遍又一遍地回答這個問題。我希望今天能找到幫助解決這個問題。這幾天來試圖設置Geocomplete與我的Meteor js應用程序一起工作。這個相同的代碼在非Meteor應用上運行得非常好,但它僅僅證明了對Meteor js應用的固執。在閱讀了很多關於論壇的建議之後,我修改了這些代碼。運行它給了下面的錯誤。請我一定要需要那些成功使用Meteor js上的Geocomplete的人的專業支持。 Onrendered功能代碼:控制檯上setTimeout回調中的異常:ReferenceError:google沒有定義

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

大火代碼

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

錯誤:

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) 

回答

1

只需在main.html中的結尾移動2個腳本標籤。這應該工作,讓你的生活更輕鬆。

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

用您的API密鑰替換YOUR_KEY。

+0

你的意思是在最後,geolayout模板關閉之前? – kehinde

+1

不,在的末尾。 –

+1

我嘲笑我的帽子。我一直在這上幾天。單詞不能很好地表達我的讚賞。 – kehinde