2017-05-26 2 views
0

Ich denke, ich habe SO mit dieser gleichen Frage immer und immer wieder übersättigt. Ich hoffe, ich würde heute eine Hilfe finden, um das zu lösen. Seit Tagen versuche ich, Geocomplete so einzurichten, dass es mit meiner Meteor js-App funktioniert. Derselbe Code läuft auf Nicht-Meteor-Apps sehr gut, aber auf Meteor-Apps erweist er sich als stur. Nachdem ich viele Vorschläge in Foren gelesen hatte, kam ich auf diesen Code. Das Ausführen hat den folgenden Fehler verursacht. Bitte brauche ich die professionelle Unterstützung von Leuten, die erfolgreich Geocomplete auf Meteor js benutzt haben. Onrendered Funktionscode:Ausnahme im setTimeout-Callback: ReferenceError: google ist nicht definiert

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> 

Fehler auf der Konsole:

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) 

Antwort

1

einfach die 2-Skripte Tags am Ende Ihres main.html bewegen. Dies sollte funktionieren und Ihr Leben leichter machen.

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

ersetzen YOUR_KEY mit Ihrem API-Schlüssel.

+0

meinen Sie am Ende, und vor dem Schließen der Geolayout-Vorlage? – kehinde

+1

Nein, am Ende Ihrer . –

+1

Ich ziehe meinen Hut. Für dich. Ich bin seit Tagen dabei. Worte können meine Wertschätzung nicht gut ausdrücken. – kehinde

Verwandte Themen