#StackBounty: #angular #geolocation #marker #angular-google-maps How to set map to center on a marker? – Angular Google Maps

Bounty: 50

I cannot center my Google map on a marker after I geocode. I cannot get it to work with this.agmMap.triggerResize(true);.

I have two markers: The initial marker (the one that is centred on, does not change), the other one changes based on the geocoding.

My code: TS

  initLat: number = 5;
  initLng: number = 5;

  zoom = 10;
  address: string;

  lat: number;
  lng: number;

  private geoCoder: google.maps.Geocoder;

  @ViewChild(AgmMap) agmMap: AgmMap;

  constructor(private maps: MapsAPILoader) { }

  ngOnInit() {
    this.maps.load().then(() => {
      this.geoCoder = new google.maps.Geocoder();
    });
  }

  getAddress(address) {
    this.address = address.value;

    this.geoCoder.geocode({ 'address': this.address }, (results, status) => {
      if (status === google.maps.GeocoderStatus.OK) {
        this.lat = results[0].geometry.location.lat();
        this.lng = results[0].geometry.location.lng();
        this.agmMap.triggerResize(true);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

HTML

<agm-map [latitude]="initLat" [longitude]="initLng" [zoom]="zoom">

    <!-- User geolocation marker -->
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>

Expected:

After Geocoding, the map should center on the marker from the given address every time.

Actual:

The Geocoder finds the address but does not center the map on the placed marker based on the address.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.