title: Drupal 7 - Javascript integration issue with Google Maps Autocomplete
body: <p>I'm trying to resolve an integration issue that I have using Google Maps Autocomplete, I have to integrate javascript codes on my drupal 7 website. The code below works fine on jsfiddle, but it's not the case on the drupal website and I cannot find why the Autocomplete doesn't do anything.</p>
  
  <p>Here are some infos that might be useful to help me in this issue.</p>
  
  <ul>
  <li>I integrate the code in "script" tags after the body.</li>
  <li>No error is shown in the console.</li>
  <li>I use drupal 7 webforms, but it shouldn't be a problem since I also use other javascript codes from html.tpl.php script to target other forms input.</li>
  </ul>
  
  <p>Here is the code :</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&amp;KEY"&gt; ... &lt;/script&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>data = [{
    "1" : ["1007","1020"],
    "2" : ["1201","1493"],
    "3" : ["6754","8652"],
  }]
  
  var localityInput = document.getElementById('locality');
  var localityOptions = {
    types: ['(regions)'],
    componentRestrictions: {country: 'ch'}
  };
  
  autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
      var place = autocomplete.getPlace();
      for (var i = 0; i &lt; place.address_components.length; i++) {
          for (var j = 0; j &lt; place.address_components[i].types.length; j++) {
              if (place.address_components[i].types[j] === "postal_code") {
                  var value = place.address_components[i].long_name;
                  document.getElementById('locality').value = value;
                  var foundIt = false;
  
                  for (var i = 0; i &lt; data.length &amp;&amp; !foundIt; i++) {
                      for (var key in data[i]) {
                          if (key in data[i]) {
                              if (data[i][key].indexOf(value) !== -1){
                                  document.getElementById('text').innerHTML = key;
                                  foundIt = true;
                              } 
                          }
  
                      }
                      if (!foundIt) {
                          document.getElementById('text').innerHTML = 0;
                      }
                  }
            } 
         }
    }
  })
  </code></pre>
  
  <p>The code just takes a google maps postal code from the autocomplete suggestions and check if it's in the data, everything works fine on JsFiddle so I don't know if that'll also affect the website.</p>
  
  <p><strong>HTML</strong> (just an example of a form for this code)</p>
  
  <pre><code>&lt;form&gt;
      &lt;input id="text"/&gt;
      &lt;input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Why I have no suggestions from the Google Maps Autocomplete?
  What am I doing wrong?</p>
  
  <p>Please suggest.</p>