javascript - Google Maps address form integration sending white screen -

i have website build in php smarty + added bootstrap. problem when add script integrating google maps, white screen.

if remove inline script (here above script) blank screen disappears. tried removing each function 1 one inline script , still got blank screen. did not work until removed functions.

<script type="text/javascript">   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(       (document.getelementbyid('autocomplete')),       { types: ['geocode'] });   google.maps.event.addlistener(autocomplete, 'place_changed', function() {     fillinaddress();   }); }  function fillinaddress() {   var place = autocomplete.getplace();    (var component in componentform) {     document.getelementbyid(component).value = '';     document.getelementbyid(component).disabled = false;   }   (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;     }   } }  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));     });   } } </script> 

the main elements targeting google maps module of webpage this:

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=roboto:300,400,500"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> <script type="text/javascript">here script above</script> <div id="map_canvas" style="height: 100px; width=100px;"></div> <script type="text/javascript">initialize();</script> 

my full page can found here http://pastebin.com/xjnzra5i. please me noob in javascript.

edit 2

i managed place auto-suggest id , working , auto-suggesting. not auto filling form. when start console , type country in field id="autocomplete" in console typeerror: document.getelementbyid(...) null on line 27 in javascript, here --> document.getelementbyid(component).value = ''; within function fillinaddress(). current html looks http://pastebin.com/nynbt7wv. part focusing is:

<div class="form"> <label class="title-submit">{'webmastersubmitwebsite_adress'|lang}</label> <div class="infos-submit"><input id="autocomplete" onfocus="geolocate()" type="text" class="input_text_large_submit" name="address"/></div> </div><br> <div class="form"> <label class="title-submit">{'webmastersubmitwebsite_postal_code'|lang}</label> <div class="infos-submit"><input id="postal_code" class="input_text_small" name="zipcode" disabled="true" /></div> </div><br> <div class="form"> <label class="title-submit">{'webmastersubmitwebsite_city'|lang}</label> <div class="infos-submit"><input id="locality" class="input_text_large_submit" name="city" disabled="true" /></div> </div><br> <div class="form"> <label class="title-submit">{'webmastersubmitwebsite_country'|lang}</label> <div class="infos-submit"><input id="country" class="input_text_large_submit" name="country" disabled="true" autocomplete="on" /></div> </div><br> 

take @ line of code:

autocomplete = new google.maps.places.autocomplete(     (document.getelementbyid('autocomplete')),     { types: ['geocode'] }); 

in particular expression:

document.getelementbyid('autocomplete') 

that looking element id attribute autocomplete. specifically, wants input element. (btw don't need parentheses around expression.)

do have element anywhere in html?

<input id="autocomplete" placeholder="enter city or address" /> 

once add autocomplete should start working.

now, how did find that, , how can find problems yourself? have used javascript debugger in chrome or other browsers? key finding errors this.

i added statement @ beginning of initialize() function:

debugger; 

then loaded page chrome developer tools open. stopped on statement, , stepped through code (stepping on function calls). there uncaught typeerror: cannot read property 'value' of null message when stepped on autocomplete() call.

the cause of message inside autocomplete() passed null value function. pasted part chrome console , ran it:

document.getelementbyid('autocomplete') 

sure enough, evaluated null, , there it's easy figure out problem is.

there lot of great info on chrome developer tools , similar tools other browsers. start introduction chrome devtools, , section debugging javascript.