Async loading google maps

[bitsm]

When loading google maps api asynchronously, the plugin fails to load autocomplete.

This is the error I get:

TypeError: Cannot read property 'Autocomplete' of undefined

11 http://127.0.0.1/eqfw/js/jquery.locationpicker.js:13:69

10 http://127.0.0.1/eqfw/js/jquery.locationpicker.js:13:124 setupInputListenersInput()

9 http://127.0.0.1/eqfw/js/jquery.locationpicker.js:24:1205 HTMLDivElement.()

8 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:2882 Function.n.extend.each()

7 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:847 n.fn.n.each()

6 http://127.0.0.1/eqfw/js/jquery.locationpicker.js:24:13 $.fn.locationpicker()

5 http://127.0.0.1/eqfw/js/eqs.funciones.js:1008:10 HTMLDocument.()

4 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:26911 j()

3 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:27220 Object.k.add [as done]()

2 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:29326 n.fn.ready()

1 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:24411 n.fn.init()

This is how I load google maps api and my custom callback function:

function initialize(obj,varlat,varlon,varzoom,varradius,varautocomplete){ if (varzoom==undefined) varzoom=15; if (varradius==undefined) varradius=30; if (varautocomplete==undefined) varautocomplete=true; if (varlat==undefined || varlon==undefined) { varzoom=5; varlat=10.65; varlon=-71.633333; } $(function(){ $(obj).locationpicker({ location:{latitude:varlat,longitude:varlon}, radius:varradius, zoom:varzoom, enableAutocomplete:varautocomplete, inputBinding:{ latitudeInput:$('#lat'), longitudeInput:$('#lon'), locationNameInput:$('#dummyaddr') } });
if (varzoom==5){ if ("geolocation" in navigator){ navigator.geolocation.getCurrentPosition(function(position){ $(obj).locationpicker('location',{latitude:position.coords.latitude,longitude:position.coords.longitude}); }); } } }); } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript;

[SanderWind]

You need to include Google Maps with the library "places":

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&amp;libraries=places"></script>

[bumblebee223]

i'm experiencing the same issue: the location picker seems not to work when i add load my map asynchronously: WORKS:

DOES NOT WORK:

the latter prompts the following error: locationpicker.jquery.js:358 Uncaught ReferenceError: google is not defined(anonymous function) @ locationpicker.jquery.js:358 @ jquery-1.12.4.min.js:2 @ jquery-1.12.4.min.js:2$.fn.locationpicker @ locationpicker.jquery.js:345(anonymous function) @ index.php:55

[Sumragen]

@bitsm You must be sure, that 'jquery-locationpicker-plugin' loaded after google maps library, because it depends of google.maps. On the MDN said about onload method

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.