Map not recentering.

Issue description Whenever the lat/lng changes through the google maps autocomplete function, it won’t pan or recenter the map when the new location is outside of the current view. It only updates after clicking on the map…

Steps to reproduce and a minimal demo of the problem Can’t use plunkr because I am using rc6 (plunkr does not have it yet)

So here is the full directive:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

// dependencies
import { MapsAPILoader } from 'angular2-google-maps/core';
declare var google: any;

@Component({
    selector: 'address-map',
    styles: [`
        .sebm-google-map-container {
            height: 300px;
        }
    `],
    template: `
        <sebm-google-map [latitude]="addressLat"
                         [longitude]="addressLng"
                         [zoom]="16"
                         [streetViewControl]="false"
                         [usePanning]="true"
                         #addressMap>
            <sebm-google-map-marker [latitude]="addressLat" [longitude]="addressLng"></sebm-google-map-marker>
        </sebm-google-map>

        <input type="text" #addressAutoComplete placeholder="Vul je adres in" class="form-control text-center">

        <br>
        <p>{{ addressLat }}</p><br>
        <p>{{ addressLng }}</p>
    `
})
export class AddressMapDirective implements OnInit {
    public addressLat:number =  52.507417;
    public addressLng:number = 6.085781;

    @ViewChild('addressAutoComplete') addressAutoComplete:ElementRef;

    constructor(private _loader: MapsAPILoader) {}

    ngOnInit() {
        // This one works...
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition((location) => {
                this.setLatLng(location.coords.latitude, location.coords.longitude);
            });
        }

        // This one only works after clicking on the map...
        this._loader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(this.addressAutoComplete.nativeElement, {});
            google.maps.event.addListener(autocomplete, 'place_changed', () => {
                let place = autocomplete.getPlace();

                this.setLatLng(place.geometry.location.lat(), place.geometry.location.lng());
            });
        });
    }

    setLatLng(lat:number, lng:number) {
        this.addressLat = lat;
        this.addressLng = lng;
    }
}

When changing the address, it is only updating after I click on the map.

Current behavior Changing lat/lng doesn’t update map location using the autocomplete function.

Expected/desired behavior Update the location.

angular2 & angular2-google-maps version Angular2 Rc6 Angular2-google-maps 0.14.0

Other information

[sebholstein]

@KingsDevelopment this is not a bug in angular2-google-maps. The problem is that google maps events, like place_changed do not run in the Zone of Angular (because the addEventListener calls are not monkey patched by Zone.js).

So when this event occures, Angular does not know that it has to run the change detection.

Try to inject the NgZone (Docs) service into you component:

constructor(private _loader: MapsAPILoader, private _zone: NgZone) {}

and run this in ngOnInit:

google.maps.event.addListener(autocomplete, 'place_changed', () => {
               this._zone.run(() => {
                 let place = autocomplete.getPlace();

                 this.setLatLng(place.geometry.location.lat(), place.geometry.location.lng());
               });
});

[harshmatic]

I am not able to achieve this even after zone.run() what to do ?