google.maps.places and its Autocomplete method are undefined

Question

I'm loading the Google Maps API, jQuery and this Geocomplete plugin. Please note that I'm also specifying the libraries (libraries=places) and eventually my API key:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='http://maps.googleapis.com/maps/api/js?v=3&sensor=false&amp;libraries=places&key=xxx'></script>
<script src='js/vendor/jquery.geocomplete.js'></script>

I'm triggering the Geocomplete plugin on the page load

$(window).load(function () {
    $('#my-input').geocomplete();
});

but I always get an error:

Uncaught TypeError: Cannot read property 'Autocomplete' of undefined [jquery.geocomplete.js:153].

Inside the plugin...

this.autocomplete = new google.maps.places.Autocomplete(
 this.input, options
);

I tried to google.maps and it returns a regular object, but places is undefined!

Answer 1

I tried to google.maps and it returns a regular object, but places is undefined!

That means the google.maps.places library is not loading (the line of code that you posted, shown below is either not correct or is not actually on your page):

<script src='http://maps.googleapis.com/maps/api/js?v=3&sensor=false&amp;libraries=places&key=xxx'></script>

This is the example from the documentation:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

The only obvious difference is the & in yours, that should work, but you should probably use it consistently.

TL;DR

Use &libraries not &libraries and it will work.