Angular-google-maps: Map not recentering.

[jurienhamaker]

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

[jurienhamaker]

So I added

    <br>
    <p>{{ addressLat }}</p><br>
    <p>{{ addressLng }}</p>

To the view, but now I can tell the lat/lng in the view is only updated when I click on the map!
I might think this is a problem with the autocomplete function, but I am not sure where to ask about this.

[jurienhamaker]

So some more review makes me think the view is not updated.

The setLatLng function is called after the autocomplete event is triggered. and the new values are being set (when I am using console.log).

But the view is not updated unless I click on the map, I tried a button, but that wasn't working either.

[SebastianM]

@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());
               });
});

[jurienhamaker]

Hey @SebastianM, thanks for your reply, this was an actual overlooked thing. And the solution worked.
(Getting way too used to using angular2 now)

This might be a note to be added in the repo, as I actually think this is going to happen to a lot more people.

[SebastianM]

Ya, maybe we add this in a FAQ area in the future. Closing this for now.

[harshmatic]

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