Google Maps address form integration sending white screen

Question

I have a website build in PHP smarty + I added also bootstrap. The problem is that when I add this script for integrating Google maps, I get White Screen.

If I remove the inline script (HERE IS THE ABOVE SCRIPT) Blank screen disappears. I also tried removing each function one by one from the inline script and still got blank screen. Did not work until I removed all 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();

  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 = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
          geolocation));
    });
  }
}
</script>

The main elements targeting the google maps module of the webpage would look like 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 IS THE SCRIPT ABOVE</script>
<div id="map_canvas" style="height: 100px; width=100px;"></div>
<script type="text/javascript">initialize();</script>

My full page can be found here http://pastebin.com/XjnZRa5i. Please help me I am a noob in javascript.

EDIT 2

I managed to place the auto-suggest id and it is working and auto-suggesting. But it is not auto filling the form. When I start the console and type a country in the field with the id="autocomplete" I get in the console TypeError: document.getElementById(...) is null on line 27 in the javascript, here --> document.getElementById(component).value = ''; within the function fillInAddress(). Current HTML looks like this http://pastebin.com/nYNbt7wv. The part that I am 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>

Answer 1

Take a look at this line of code:

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

In particular this expression:

document.getElementById('autocomplete')

That is looking for an element whose id attribute is autocomplete. Specifically, it wants an input element. (BTW you don't need the extra parentheses around this expression.)

Do you have an element like this anywhere in your HTML?

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

Once you add that your autocomplete should start working.

Now, how did I find that, and how can you find problems like this yourself? Have you used the JavaScript debugger in Chrome or other browsers? That is the key to finding errors like this.

I added this statement at the beginning of the initialize() function:

debugger;

Then I loaded the page with the Chrome developer tools open. It stopped on that statement, and then I stepped through the code (stepping over function calls). There was an Uncaught TypeError: Cannot read property 'value' of null message when I stepped over the Autocomplete() call.

The likely cause of that message inside Autocomplete() would be that you passed a null value into the function. So I pasted this part into the Chrome console and ran it:

document.getElementById('autocomplete')

Sure enough, it evaluated to null, and from there it's easy to figure out what the problem is.

There is a lot of great info on the Chrome developer tools and similar tools for other browsers. I would start with this introduction to the Chrome DevTools, and especially this section about debugging JavaScript.