Obtain latitude and longitude coordinates using address in the Google Maps API

Question

Obtain latitude and longitude coordinates using address in the Google Maps API

Is there a better way to retrieve the latitude and longitude from an address?

Currently, I am using the Google Maps API by passing the address like this:

getLocationJson(term: string) {
    var term = "Mechelsesteenweg+64";
   return this._http.get('https://maps.googleapis.com/maps/api/geocode/json?address=Someroad+64&key=AIzkeystuffjXDm6eU5mPP9Nczg')
   .subscribe((json: any) => {
        var obj = JSON.parse(json);
        var jsonParsed = obj["results"];
    });
}

However, I have a feeling that this might not be the most efficient method. Can I utilize geocoder instead? For example:

getGeoLocation(address: string) {
    let geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var latlng = google.maps.location.LatLng();
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

Any advice would be greatly appreciated. (It's similar to this question but with a different angle)

angular typescript google-maps-api-3

Answer 1

Answer №1

I just provided a solution for the question you shared, and below is the approach that worked successfully for me:

retrieveGeolocation(address: string): Observable<any> {
    console.log('Retrieving address: ', address);
    let geocoder = new google.maps.Geocode();
    return Observable.create(observer => {
        geocoder.geocode({
            'address': address
        }, (results, status) => {
            if (status == google.maps.GeocoderStatus.OK) {
                observer.next(results[0].geometry.location);
                observer.complete();
            } else {
                console.log('Error: ', results, ' & Status: ', status);
                observer.error();
            }
        });
    });
}

Answer 2

I just provided a solution for the question you shared, and below is the approach that worked successfully for me:

retrieveGeolocation(address: string): Observable<any> {
    console.log('Retrieving address: ', address);
    let geocoder = new google.maps.Geocode();
    return Observable.create(observer => {
        geocoder.geocode({
            'address': address
        }, (results, status) => {
            if (status == google.maps.GeocoderStatus.OK) {
                observer.next(results[0].geometry.location);
                observer.complete();
            } else {
                console.log('Error: ', results, ' & Status: ', status);
                observer.error();
            }
        });
    });
}

Obtain latitude and longitude coordinates using address in the Google Maps API

Answer №1

Similar questions

An issue arising with the TypeScript antlr4ts listener type

Make sure to verify the optional parameter before using it in your code

Building a ng-select in reactive forms involves adding dynamic options to a select box using Angular

I encountered a function overload error while creating a component for the API service

react-i18next: issues with translating strings

The use of await can only occur inside an async function

The issue with IONIC/Angular lies in its inability to properly render the JSON data retrieved

Issue with integrating jquery path into angular.json in JHipsterI'm facing a problem

What is the proper way to define the scope for invoking the Google People API using JavaScript?

Eliminate any repeated elements in the array by utilizing TypeScript

Tips for concealing or revealing the admin link

Tips for leveraging TypeScript with Redux connected components

The presence of a constructor in a component disrupts the connection between React and Redux in

VSCode highlights issues that do not impact the compilation process

I recently upgraded my Angular version from 5 to 8, and encountered an unexpected error with the toastr plugin

The data in Angular2 service is not being saved consistently

TypeScript Implementation of ES6 Arrow Functions

How to retrieve the HTTPClient value in Angular?

What is the best method for exporting and importing types in React and Next.js apps?

Caution: Refs cannot be used with function components, even when using forwardRef() with Styled Components