How to show Google Maps with address in angular2

Question

I could success to show google map using lat and lng. However, I have no idea how to show it using address. I mean I need to generate lat & lng from address.

I saw some codes here, mostly using google.maps.Geocoder. The problem is that if I try to use google.maps.Geocoder, it makes an error that cannot find name 'google'.

If anyone know how to solve this problem, please let me know. And if you reply with example code, it could big help!

Thanks for your help and advice! :D

Answer 1

It was simple. I solve this that call api url with address parameter

constructor(private http: Http) { }
  getlatlng(address){
    return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?address=' + address)
      .catch(handleError);
  }

Answer 2

npm install --save @types/googlemaps;

import {} from '@types/googlemaps'; 

to your component.ts file

It's work for me!

Answer 3

This is a really good tutorial for searching an address and displaying it on google maps:

http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

It has a plunkr demo as well at the bottom. Hope this is what you were looking for.

Address to Lat & long

let place: google.maps.places.PlaceResult = autocomplete.getPlace();

//verify result
if (place.geometry === undefined || place.geometry === null) {
    return
}

//set latitude, longitude
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();

Answer 4

I installed again using npm install @types/googlemaps --save-dev So, I could solve the error that cannot find name 'google'

And... Are there anyone give me some example geocoding with angular2?

Answer 5

to find the name as google in your application you need to declare the var google : any ; at the top component.