title: Google Places Autocomplete + Angular2
body: <p>I am building a simple Google Places Autocomplete Angular2 directive but the problem is that cannot get any prediction (the response is always empty?!)...</p>
  <p>As a proof of concept I created the simplest possible code snippet as a reference:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&amp;libraries=places&quot; async defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;button type=&quot;button&quot; onclick=&quot;go()&quot;&gt;go&lt;/button&gt;
      &lt;input id=&quot;autocomplete&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
      &lt;script&gt;
      var autocomplete = null;
  
      function go() {
          autocomplete = new google.maps.places.Autocomplete(
              (document.getElementById('autocomplete')), {
                  types: ['geocode']
              });
      }
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>The above code works - I can get predictions after clicking Go button.</p>
  <p>Now, Angular2 scenario:</p>
  <p>My _Layout.cshtml file has the following tag in head section:</p>
  <pre><code>&lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&amp;libraries=places&quot; async defer&gt;&lt;/script&gt;
  </code></pre>
  <p>My directive:</p>
  <pre>
  import { Directive, ElementRef, Input } from '@angular/core';
  
  declare var google: any;
  
  @Directive({ selector: '[googleplaces]' })
  export class GooglePlacesDirective {
  
      autocomplete: any;
  
      constructor(private el: ElementRef) {
  
      }
  
      ngAfterContentInit() {
          this.autocomplete = new google.maps.places.Autocomplete(
              (this.el.nativeElement),
              { types: ['geocode', 'cities'] });
      }
  }
  </pre>
  <p>And simple Angular component:</p>
  <pre><code>&lt;form [formGroup]=&quot;companyForm&quot;&gt;
     
      .
      .
      .
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;Location&quot;&gt;Location&lt;/label&gt;
          &lt;input type=&quot;text&quot; 
                 class=&quot;form-control&quot; 
                 id=&quot;Location&quot; 
                 fromControlName=&quot;Location&quot; 
                 googleplaces&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>The Scenario 2 (angular) doesn't work. The facts:</p>
  <ul>
  <li>autocomplete is initialized (it has all expected properties/methods, placeholder is &quot;Enter a location&quot;, etc...)</li>
  <li>autocomplete doesn't return any prediction for typed search string (it returns only &quot;/**/<em>xdc</em>._le3zv3 &amp;&amp; <em>xdc</em>._le3zv3( [4] )&quot;)</li>
  </ul>
  <p>Also, Google API Console says everything is as it should be?! Here is the screenshot:</p>
  <p><img src="https://i.stack.imgur.com/UbmgA.png" alt="Dashboard screenshot" /></p>
  <p>What can be in question here? Thanks...</p>