CODEWITHSUNDEEP
angulartypescriptgoogle-maps
Piyush Kumar
Piyush Kumar

Reputation: 551

Angular 7 use import Googlemaps

Hi I have been struggling with importing the google maps JS library. I have installed @google/maps library using npm but I cannot import the reference of that library in the component file.

I have tried everything in mention in this question : @types/googlemaps/index.d.ts' is not a module

but still I am not able to use the google maps in my component.

Here is what I am doing in my code:

    /// <reference types="@types/googlemaps" />
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
 import {} from '@google/maps';

@Component({
  selector: 'app-main-search',
  templateUrl: './main-search.component.html',
  styleUrls: ['./main-search.component.scss']
})
export class MainSearchComponent implements OnInit {
  @ViewChild('city', { read: ElementRef }) searchCityInput:ElementRef;
  listOfOption = ['Java Developer', 'Java Team Lead', 'Java Architect', 'Java Programmer', 'Senior Java Developer'];
  listOfSelectedValue = [ ];
  recent_active = false;
  constructor(private router: Router) { }

  ngOnInit(): void {
    const autocomplete = new google.maps.places.Autocomplete(this.searchCityInput.nativeElement);
    console.log("Input: ", autocomplete);
    //Event listener to monitor place changes in the input
    google.maps.event.addListener(autocomplete, 'place_changed', () => {
      //Emit the new address object for the updated place
      // this.onSelect.emit(this.getFormattedAddress(autocomplete.getPlace()));
      console.log("Formated Address: ", autocomplete.getPlace());
    });
  }

  onSubmit() {
    this.router.navigateByUrl('/search/results');
  }
}

I am getting this error :

ERROR TypeError: Cannot read property 'Autocomplete' of undefined

Upvotes: 0

Views: 681

Answers (1)

enf0rcer
enf0rcer

Reputation: 555

As stated in the comment, Piyush had to include the places library in his project.

Upvotes: 2

Related Questions