TypeError: cannot set property 'value' of null Autocomplete form google maps -

if fill in input field "adresse automatisch ausfüllen:" route , click enter have js error:

typeerror: cannot set property 'value' of null

i tried ... = null; have same error.

here js code:

<script> // example displays address form, using autocomplete feature // of google places api users fill in information.  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() {   // create autocomplete object, restricting search   // geographical location types.   autocomplete = new google.maps.places.autocomplete(       /** @type {htmlinputelement} */(document.getelementbyid('autocomplete')),       { types: ['geocode'] });   // when user selects address dropdown,   // populate address fields in form.   google.maps.event.addlistener(autocomplete, 'place_changed', function() {     fillinaddress();   }); }  // [start region_fillform] function fillinaddress() {   // place details autocomplete object.   var place = autocomplete.getplace();    (var component in componentform) {     document.getelementbyid(component).value = '';     document.getelementbyid(component).disabled = false;   }    // each component of address place details   // , fill corresponding field on form.   (var = 0; < 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;     }   } } // [end region_fillform]  // [start region_geolocation] // bias autocomplete object user's geographical location, // supplied browser's 'navigator.geolocation' object. function geolocate() {   if (navigator.geolocation) {     navigator.geolocation.getcurrentposition(function(position) {       var geolocation = new google.maps.latlng(           position.coords.latitude, position.coords.longitude);       autocomplete.setbounds(new google.maps.latlngbounds(geolocation,           geolocation));     });   } } // [end region_geolocation]      </script> 

an here html:

<div class="row">     <div class="six columns">         <div class="row">             <div class="twelve columns">                 <div class="form-row field_text">                     <label for="veranstaltungsgelaende" class="required">adresse automatisch ausfüllen:</label><br>                     <input onfocus="geolocate()" type="text"id="autocomplete" class="input_text">                     geben sie hier die komplette adresse ein: (z.b: rathausstraße 61 52222 stolberg )                 </div>             </div>             <div class="six columns b0">                 <div class="form-row field_text">                     <label for="veranstaltungsgelaende" class="required">veranstaltungsgelände name*:</label><br>                     <input type="text" id="veranstaltungsgelaende" name="veranstaltungsgelaende" class="input_text">                 </div>                 <div class="form-row field_text">                     <label for="plz" class="required">plz *:</label><br>                     <input type="text" id="plz" name="plz" class="input_text">                 </div>              </div>             <div class="six columns b0">                 <div class="form-row field_text">                     <label for="strasse" class="required">straße *:</label><br>                     <input type="text" id="route" disabled="true" name="strasse" class="input_text">                 </div>                 <div class="form-row field_text">                     <label for="ort" class="required">ort *:</label><br>                     <input type="text" id="ort" name="ort" class="input_text">                 </div>              </div>             <div class="twelve columns b0">                 <a href="#" class="btn btn_green right">speichern und zur Übersicht</a>             </div>             <div class="clear"></div>         </div>     </div>     <div class="six columns">         google maps     </div>     <div class="clear"></div> </div> 

here testing page:

http://davis-design.de/marktadresse/veranstaltungsort-erstellen.html

i try example: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=de-de

hope can me.

you need use fields correct elements id. or set hidden fields no need elements

<table id="address">   <tr>     <td class="label">street address</td>     <td class="slimfield"><input class="field" id="street_number"                                  disabled="true"></input></td>     <td class="widefield" colspan="2"><input class="field" id="route"                                              disabled="true"></input></td>   </tr>   <tr>     <td class="label">city</td>     <td class="widefield" colspan="3"><input class="field" id="locality"                                              disabled="true"></input></td>   </tr>   <tr>     <td class="label">state</td>     <td class="slimfield"><input class="field"                                  id="administrative_area_level_1" disabled="true"></input></td>     <td class="label">zip code</td>     <td class="widefield"><input class="field" id="postal_code"                                  disabled="true"></input></td>   </tr>   <tr>     <td class="label">country</td>     <td class="widefield" colspan="3"><input class="field"                                              id="country" disabled="true"></input></td>   </tr> </table>