title: ERROR Error: Uncaught (in promise): ReferenceError: google is not defined
body: <p>I'm using Angular 2 + Google Maps Places Autocomplete in my projet it gives me this error:</p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): ReferenceError: google is not defined</p>
  </blockquote>
  
  <p>heres the html:</p>
  
  <pre><code>  &lt;agm-map  id="googleMap"&gt;
  
    &lt;/agm-map&gt;
  </code></pre>
  
  <p>component :</p>
  
  <pre><code> ngOnInit() {
      var p1 = new google.maps.LatLng(45.463688, 9.18814);
      var p2 = new google.maps.LatLng(46.0438317, 9.75936230000002);
  
      let  directionsService = new google.maps.DirectionsService;
      let  directionsDisplay = new google.maps.DirectionsRenderer;
      let mapProp = {
          center:{lat:  30.42018, lng: -9.5981500},
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP 
      };
      let map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
      directionsDisplay.setMap(map);
      this.calculateAndDisplayRoute(directionsService, directionsDisplay);
  //set google maps defaults
  this.zoom = 4;
  this.latitude = 39.8282;
  this.longitude = -98.5795;
  
  //create search FormControl
  this.searchControl = new FormControl();
  
  //set current position
  //this.setCurrentPosition();
  
    var options = {
    types: ['(cities)'],
    componentRestrictions: {country: "ma"}
    };
    //load Places Autocomplete
    this.mapsAPILoader.load().then(() =&gt; {
    let autocomplete = new 
    google.maps.places.Autocomplete(this.searchElementRef.nativeElement, 
    options);
  
    });
   }
  </code></pre>
  
  <p>the module:</p>
  
  <pre><code> imports: [
     AgmCoreModule.forRoot({
    apiKey: "MyOWNKEY",
    libraries: ["places"]
  }),
  </code></pre>
  
  <p>By the way I'm using AGM(Angular Google Maps)</p>