FabulousCo FabulousCo - 1 year ago 291
Javascript Question

Google Maps Autocompletion API

I'm trying to embed the google maps autocompletion API into my project.
I did everything like it was written in the documentation, but it returns me this error : Uncaught InvalidValueError: initAutocomplete is not a function. Sometimes, when I reload 3 times the page, it finally works, which is quite strange...
Does somebody know where the problem could come from ?
Here is the link where is the test that I did : http://www.dubair.ie/en/maps

Here is the code of the page (the link to the key script is in the head which is in an other file) :

{% extends "PlatformBundle::body.html.twig" %}

{% block content %}

<div id="locationField" class="form-group col-xs-12">
<textarea id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"></textarea>

<div id="details" class="hidden">
<input disabled id="street_number"/>
<input disabled id="route"/>
<input disabled id="locality"/>
<input disabled id="postal_code"/>
<input disabled id="country"/>

// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
// administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'

function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode'], componentRestrictions: {country: 'ie'}});

// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);

function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();


for (var component in componentForm) {
document.getElementById(component).value = '';
// document.getElementById(component).disabled = false;

// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy

{% endblock %}

Thank you for your help

Answer Source

I think it's because you call API in the header, but you have the initAutocomplete function in the body of the HTML document. Sometimes the body is not yet loaded, sometimes it is.

Just put this code:

<script src="https://maps.googleapis.com/maps/api/js?key=....&libraries=places&callback=initAutocomplete" async defer></script>

right BEFORE </body> tag (and remove it from header). So it would be the last element in the body of the HTML document. This way initAutocomplete should always be available when the API is loaded.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download