Tengo un problema con mi código, el cual no me permite ejecutar correctamente la función autocomplete de google maps que tengo implementada dentro de un formulario para que me rellene campos automáticamente. Me aparece el error mencionado en el asunto.
Alguna idea de cómo poder solucionarlo??
Muchas gracias de antemano!!
Código Ruby y html de mi formulario:
Código HTML :
<h2>Register your home</h2> <%= form_for @home, html: { multipart: true, id: "address", class: "form-address" } do |f| %> <!-- Search Field --> <div class="row"> <form role="form"> <div class="flex-container c-1column" id="locationField"> <input class="flex-item" id="autocomplete" placeholder="Insert your address" onFocus="geolocate()" type="text"></input> </div> <!-- Street Address --> <div class="flex-container"> <div class="flex-item c-2column"> <%= f.label :Address %> <%= f.text_field :address, id: "route" %> </div> <div class="flex-item c-2column"> <%= f.label :Street_Number %> <%= f.text_field :street_number, id: "street_number" %> </div> </div> <!-- City --> <div class="flex-container"> <div class="flex-item c-1column"> <%= f.label :City %> <%= f.text_field :city, id: "locality" %> </div> </div> <!-- State & Zip --> <div class="flex-container"> <div class="flex-item c-2column"> <%= f.label :State %> <%= f.text_field :state, id: "administrative_area_level_1" %> </div> <div class="flex-item c-2column"> <%= f.label :Zip_Code %> <%= f.text_field :postcode, id: "postal_code" %> </div> </div> <!-- Country --> <div class="flex-container"> <%= f.label :Country %> <%= f.text_field :country, id: "country" %> </div> <div class="flex-container"> <%= f.label :Photo %> <%= f.file_field :avatar %> </div> <div class="flex-container"> <%= f.submit 'Save' %> </div> </form> </div> </div> <% end %> <script>initialize()</script>
Código javascript:
Código Javascript :
/AUTOCOMPLETE 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 initialize() { autocomplete = new google.maps.places.Autocomplete( /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), { types: }); google.maps.event.addListener(autocomplete, 'place_changed', function() { fillInAddress(); }); } function fillInAddress() { 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.types; if (componentForm) { var val = place.address_components]; document.getElementById(addressType).value = val; } } } // function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); var circle = new google.maps.Circle({ center: geolocation, radius: position.coords.accuracy }); autocomplete.setBounds(circle.getBounds()); }); } } //