Angular-google-maps: Address instead of coordinates

[be-codified]

I have been already asking at chat.

Probably i am not the first one who is asking if there is a way to show location on map by passing address instead of coordinates?

Thank you for your answer.

[SebastianM]

@be-codified sorry for the late answer.

Would be a useful feature for sure. I think we should implement a service that can transform an address to coordinates first and then think about a new feature for the maps component.

[be-codified]

@SebastianM service it is. Thank you.

[brian-singer]

https://developers.google.com/maps/documentation/geocoding/intro

[born2net]

so is there a way to get address lookup with the lib?
tx
Sean

[alfupe]

@born2net it's been a while since your question, I suppose you have found some solution.

Building you own service using what @brian-singer suggests us is incredibly easy. This could be a mock of a service:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class GeocodingApiService {
    API_KEY: string;
    API_URL: string;

    constructor(private http: Http) {
        this.API_KEY = 'GET YOURS AT https://developers.google.com/maps/documentation/geocoding/get-api-key'
        this.API_URL = `https://maps.googleapis.com/maps/api/geocode/json?key=${this.API_KEY}&address=`;
    }

    findFromAddress(address: string, postalCode?: string, place?: string, province?: string, region?: string, country?: string): Observable<any> {
        let compositeAddress = [address];

        if (postalCode) compositeAddress.push(postalCode);
        if (place) compositeAddress.push(place);
        if (province) compositeAddress.push(province);
        if (region) compositeAddress.push(region);
        if (country) compositeAddress.push(country);

        let url = `${this.API_URL}${compositeAddress.join(',')}`;

        return this.http.get(url).map(response => <any> response.json());
    }
}

Then you inject and consume it in the component you have the map. For example:

updateLatLngFromAddress() {
        this.geocodingAPIService
            .findFromAddress(this.address.value, this.postalCode.value, this.selectedPlace.value.place, this.selectedPlace.value.province, this.selectedPlace.value.region, this.selectedPlace.value.country)
            .subscribe(response => {
                if (response.status == 'OK') {
                    this.lat = response.results[0].geometry.location.lat;
                    this.lng = response.results[0].geometry.location.lng;
                } else if (response.status == 'ZERO_RESULTS') {
                    console.log('geocodingAPIService', 'ZERO_RESULTS', response.status);
                } else {
                    console.log('geocodingAPIService', 'Other error', response.status);
                }
            });
    }

With the component properties this.lat and this.lng updated you can center the map, update a marker, etc.

[born2net]

thanks @alfupe

[kgoris]

@alfupe Thanks, exactly what I need =)

[AncaElena10]

@alfupe where have you been all this time? Thank you a million times, you saved me, I've been searching for this since last week.

[alfupe]

@AncaElena10 😂 thanks!

[yuanhsueh]

just for reference here, made minor changes from @alfupe 's solution for Angular 6

// https://github.com/SebastianM/angular-google-maps/issues/271

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class GeocodingApiService {
  API_KEY: string;
  API_URL: string;

  constructor(private http: HttpClient) { 
    // https://console.developers.google.com/apis/library/geocoding-backend.googleapis.com
    this.API_KEY = 'enable api from the above link'
    this.API_URL = `https://maps.googleapis.com/maps/api/geocode/json?key=${this.API_KEY}&address=`;
  }

  findFromAddress(address: string, postalCode?: string, place?: string, province?: string, region?: string, country?: string): Observable<any> {
    let compositeAddress = [address];

    if (postalCode) compositeAddress.push(postalCode);
    if (place) compositeAddress.push(place);
    if (province) compositeAddress.push(province);
    if (region) compositeAddress.push(region);
    if (country) compositeAddress.push(country);

    let url = `${this.API_URL}${compositeAddress.join(',')}`;

    return this.http.get(url).pipe(
      map(response => <any> response)
    )
  }

}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.