Problema com Google Maps API

Front-end
,
#1

Boa tarde amigos
Estou com um problema numa página HTML que estou desenvolvendo. Tenho um formulário para cadastrar dados de um estabelecimento e estou usando o Autocomplete do Google Maps para preencher certos campos. Porém ele nem sempre funciona, meio que somente quando quer funcionar.

Aqui o HTML

<div id="header">
	<div class="header_links">Home</div>
	<div class="header_links">Contato</div>
	<div class="header_links">Sobre</div>
</div>
<div id="corpo">
	<div class="left">
		<div id="formulario">
			<form>
				<div class="f"><input class="textBox" id="nome" type="text" name="nome" placeholder="Nome do estabelecimento"></div>
				<div class="f"><input class="textBox" id="cnpj" type="text" name="cnpj" placeholder="CNPJ"></div>
				<div class="f"><input class="textBox" id="telefone" type="text" name="telefone" placeholder="Telefone"></div>
				<div class="f"><input class="textBox" id="route" type="text" name="rua" placeholder="Rua"><input class="textBox" id="street_number" type="text" name="numero" placeholder="N°"></div>
				
				<div class="f"><input class="textBox" id="locality" type="text" name="cidade" placeholder="Cidade"><input class="textBox" id="administrative_area_level_1" type="text" name="estado" placeholder="UF"></div>
				
				<div class="f"><input class="textBox" id="postal_code" type="text" name="cep" placeholder="CEP"></div>
				<div class="f"><input class="textBox" id="country" type="text" name="pais" placeholder="País"></div>
				<div class="f"><input id="enviar" type="submit" name="enviar" placeholder="Enviar"></div>

				<input id="lat" type="hidden" value="0">
				<input id="lng" type="hidden" value="0">
			</form>
		</div>
	</div>
	<div class="right">
		<div id="mapa_body">
			<div class="autocompletarBox"><input id="autocomplete" onfocus="geolocate()" type="text" placeholder="Informe um endereço"></div>
			<div id="map"></div>
        </div>
	</div>
</div>

Aqui o Javascript

//Cria o mapa

var map;
function initMap() {

	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: -7.225902, lng: -39.326971},
		zoom: 11                                
	});
	map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
 }


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() {

	// Cria o objeto autocomplete, restringindo a busca de acordo com
	// sua localização geográfica.
	autocomplete = new google.maps.places.Autocomplete(
	/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
	{types: ['geocode']});

	// Quando o usuário seleciona um endereço dentre as opções da lista, os campos
	// do formulário são preenchidos autmaticamente.
	autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {

	var place = autocomplete.getPlace();

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

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

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
			});
			autocomplete.setBounds(circle.getBounds());
		});
	}
}

google.maps.event.addListener(autocomplete, 'place_changed', function() {

    map.setCenter(autocomplete.getPlace().geometry.location);
    maxZoomService.getMaxZoomAtLatLng(autocomplete.getPlace().geometry.location, function(response) {
        map.setZoom(response.status == google.maps.MaxZoomStatus.OK ? parseInt(response.zoom * .85) : 16);});

    // adiciona uma marker para o endereço
    addrMarker.setPosition(autocomplete.getPlace().geometry.location);
    addrMarker.setVisible(true);

    // chama outra função para setar os valores os inputs
    fillGeolocFields(autocomplete.getPlace().geometry.location);});

function fillGeolocFields(location) {

    $('#lat').val(location.lat());
    $('#lng').val(location.lng());}

Alguém com experiência ou que já tenha passado por isso pode me dizer como proceder?

Obrigado desde já.