Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps v3 API - Auto Complete (address)

Attempting to get auto complete working for my google maps application.

Here is the current code:

HTML

<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off"> 

Javascript

    var input = document.getElementById('address');     var options = {         componentRestrictions: {country: 'au'}     };     var autocomplete = new google.maps.places.Autocomplete(input, options); 

Unfortunately nothing happens when typing an address.

Any ideas?

Thanks in advance.

Edit: I'm actually receiving the following error:

Uncaught TypeError: Cannot read property 'autocomplete' of undefined

Not sure why, the code is placed in my map initialize function.

Edit 2: Fixed. Answer below.

like image 285
Matt Avatar asked Aug 13 '12 03:08

Matt


People also ask

How do I create an autocomplete address field in Google Maps API?

First, enable Google Places API Web Service. Get the API key. You will have to use it in the script tag in html file. Use script file to load the autocomplete class.

Is google address autocomplete API free?

First of all, the new Google Place Autocomplete API is not free (after exceeding the US$200 monthly credit equivalent free usage). Now coming to the pricing, Google has introduced three possible pricing criteria: Autocomplete without Places Details – Per Session. Autocomplete (included with Places Details) – Per ...

Is Google Maps autocomplete free?

The autocomplete request is available at no charge, and the subsequent Place Details call gets charged based on regular Place Details pricing. A Place Details request generates Data SKUs (Basic, Contact, and/or Atmosphere) – depending on the fields that are specified in the request.


1 Answers

Your fix worked for me too. I'm using the Geocomplete jQuery Plug-in http://ubilabs.github.com/geocomplete/ and the instructions on their home page says to use this

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

But it didn't work for me and was getting the same error.

See documentation for Google Maps API here https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library

like image 178
Hung Luu Avatar answered Sep 30 '22 21:09

Hung Luu