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

Solution 1

npm install --save @types/googlemaps;

import {} from '@types/googlemaps'; 

to your component.ts file

It's work for me!

Solution 2

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);
  }

Solution 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();

Comments

[Mingyu Jeon]

Thanks for the reply, but it's not for mine. I know how to get address from lat&lng. I need to know how to get lat & lng from address.

[Andrew Mogg]

I added a code snippet above where he converts the address entered (place) into lat & long. Is this what you were looking to do?

[wiwi]

This, unfortunately gives a Cross-Origin Request Blocked

[Francisco Bueno]

Geocoding API costs $5.00 per 1,000 calls, or $0.005 per call :(