1

I am using angular 2-google-maps.
how to get Address like country and pin from latitude,longitude in angular2 google maps with typescript ?

paruvelly Vishwanath
  • 1,202
  • 3
  • 14
  • 30
  • This might help http://stackoverflow.com/a/23344822/217408 If not please add the code that demonstrates what you tried and where you failed (with exact error message) – Günter Zöchbauer Nov 25 '16 at 11:54

3 Answers3

9

this works for me

getCurrentLocation() {
this.mapsAPILoader.load().then(() => {
  let geocoder = new google.maps.Geocoder;
  let latlng = {lat: this.currentBusiness.latitude, lng: this.currentBusiness.longitude};
  let that = this;
  geocoder.geocode({'location': latlng}, function(results) {
      if (results[0]) {
        that.zoom = 11;
        that.currentLocation = results[0].formatted_address;
        //console.log(that.currentLocation);
      } else {
        console.log('No results found');
      }
  });
});

}


you have to reassign 'this' because it lost the reference

I hope this helps you

emilio canonica
  • 101
  • 1
  • 2
5

Using Angular Google Maps you can do something like:

getGeoLocation(lat: number, lng: number) {
    if (navigator.geolocation) {
        let geocoder = new google.maps.Geocoder();
        let latlng = new google.maps.LatLng(lat, lng);
        let request = {
            latLng: latlng
        };
        geocoder.geocode(request, (results, status) = > {
            if (status == google.maps.GeocoderStatus.OK) {
                let result = results[0];
                let rsltAdrComponent = result.address_components;
                let resultLength = rsltAdrComponent.length;
                if (result != null) {
                    this.marker.buildingNum = rsltAdrComponent.find(x = > x.types == 'street_number').long_name;
                    this.marker.streetName = rsltAdrComponent.find(x = > x.types == 'route').long_name;
                } else {
                    alert("No address available!");
                }
            }
        });
    }
}

*Make sure you globally expose google object: declare var google: any;

And then:

mapClicked($event: MouseEvent) {
    this.marker.lat = $event.coords.lat;
    this.marker.lng = $event.coords.lng;
    this.getGeoLocation(this.marker.lat, this.marker.lng);
    console.log("Lat: " + this.marker.lat + " Long: " + this.marker.lng)
}

Component/HTML:

<agm-map [latitude]="marker.lat || centerLat" [longitude]="marker.lng || centerLng" [zoom]="8" (mapClick)="mapClicked($event)">
    <agm-marker *ngIf="marker.lat" (markerClick)="clickedMarker(marker.label)" [latitude]="marker.lat" [longitude]="marker.lng" [markerDraggable]="marker.draggable" (dragEnd)="markerDragEnd(marker, $event)">
        <agm-info-window [disableAutoPan]="true">
            {{marker.label}}
        </agm-info-window>
    </agm-marker>
</agm-map>
Milo
  • 3,365
  • 9
  • 30
  • 44
  • I am getting this error ERROR ReferenceError: google is not defined, plz help me – Anil May 10 '18 at 11:21
  • @Anil https://stackoverflow.com/questions/42394697/angular2-cannot-find-namespace-google – Milo May 10 '18 at 12:04
0

Google maps has an api available to do this: https://developers.google.com/maps/documentation/geocoding/intro

Its free for use for free apps/websites.

John Baird
  • 2,606
  • 1
  • 14
  • 33