Google Maps Events


#1

I’m reading the address of the center of my Google Map, but have a problem. When the user drags the maps around, the following code reads off the change in coordinates and updates the respectively address ok. but when I click the “my position button” in the bottom right, the address doesn’t update, and remains the last position when the user last dragged the map. Any advice on this will be highly appreciated! Thanks!!!

mapMoveSubscribe() {
this.map.addEventListener(GoogleMapsEvent.CAMERA_CHANGE).subscribe(() => {
});
}


#2

you can use google maps event “MY_LOCATION_BUTTON_CLICK”

this.map.addEventListener(GoogleMapsEvent.MY_LOCATION_BUTTON_CLICK).subscribe(() => {
// Update Address here
});

#3

OK, but now it doesn’t read when I drag the camera. I need both of them to work. Can’t get them both to work. Any ideas?


#4

Add both of these Events
Your original and mine

mapMoveSubscribe() {
this.map.addEventListener(GoogleMapsEvent.CAMERA_CHANGE).subscribe(() => {
});
this.map.addEventListener(GoogleMapsEvent.MY_LOCATION_BUTTON_CLICK).subscribe(() => {
// Update Address here
});
}

#5

Nope, still doesn’t work. It still needs two click to trigger an on-click address change…


#6

Will you post your code in here so i can reproduce it ?


#7

Sure, here it is. I think the problem is that when you click, it also moves the map to re-position it in the location where you are, which also triggers the move map event, but it doesn’t follow through to update the actually address (this.locationObject)

  mapMoveSubscribe() {
    this.map.addEventListener(GoogleMapsEvent.CAMERA_CHANGE).subscribe(() => {
      this.map.getCameraPosition().then((cameraPosition) => {
        this.temp = JSON.stringify(cameraPosition.target);
        this.temp2 = JSON.parse(this.temp);
        this.currentLatitude = this.temp2.lat;
        this.currentLongitude = this.temp2.lng;
        let geocoder = new google.maps.Geocoder();
        let latlng = new google.maps.LatLng(this.currentLatitude, this.currentLongitude);
        let request = { latLng: latlng };
        geocoder.geocode(request, (results, status) => {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0] != null) {
              let address = results[0].formatted_address;
              this.locationObject = address;
            } else { alert("No address available"); }
          }
        });
      });
    });
  }

#8

Will you try this code

  mapMoveSubscribe() {
    this.map.addEventListener(GoogleMapsEvent.CAMERA_IDLE).subscribe(() => {
      this.map.getCameraPosition().then((cameraPosition) => {
        this.temp = JSON.stringify(cameraPosition.target);
        this.temp2 = JSON.parse(this.temp);
        this.currentLatitude = this.temp2.lat;
        this.currentLongitude = this.temp2.lng;
        let geocoder = new google.maps.Geocoder();
        let latlng = new google.maps.LatLng(this.currentLatitude, this.currentLongitude);
        let request = { latLng: latlng };
        geocoder.geocode(request, (results, status) => {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0] != null) {
              let address = results[0].formatted_address;
              this.locationObject = address;
            } else { alert("No address available"); }
          }
        });
      });
    });
  }

#9

Yes, works like a charm!!! Thanks so much!!!