Angular-google-maps: Cant change map center

[alarcl]

Issue description
Set map center. Then move map. Then set map center to same coordinates - no effect.

Steps to reproduce and a minimal demo of the problem
http://plnkr.co/edit/RfQkTH6Br1WpKMpF6Hpe?p=preview

_What steps should we try in your demo to see the problem?_
Move map. Push button.

Current behavior
Map center dont change.

Expected/desired behavior
Map center should change.

angular2 & angular-google-maps version
1.0.0-beta.0

Other information

[ghost]

use panTo

[craftpip]

To add on @piotrmach's answer
import GoogleMapsAPIWrapper in your component, it has the panTo and setCenter methods,

[accentureChris]

Do we need to reinitialize anything? Setting it and nothing's working.

import { GoogleMapsAPIWrapper } from '@agm/core';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'core-map',
  styleUrls: [ './map.component.scss' ],
  templateUrl: './map.component.html',
})
export class MapComponent {
  constructor(
    public gMaps: GoogleMapsAPIWrapper
  ) {}

  public markerClicked = (markerObj) => {
    this.gMaps.setCenter({ lat: markerObj.latitude, lng: markerObj.longitude });
    console.log('clicked', markerObj, { lat: markerObj.latitude, lng: markerObj.longitude });
  }
}

console output: Object {lat: 42.31277, lng: -91.24892}

Also have tried panTo with the same result.

[ghost]

setCenter is a promise

[akafaneh]

+1

[akafaneh]

Can anyone make a plunker and use the setCenter method because I couldn't figure out how to, or maybe it's not working

[accentureChris]

@piotrmach What are we supposed to do in the promise? Looks like it returns an arbitrary value or reason in the promise. The issue is setCenter/panTo is not even being triggered/returning anything.

[ghost]

for me it worked, the thing is GoogleMapsAPIWrapper has to used in a component that is inside main map tag

[accentureChris]

Is it possible to reference GMapsWrapper from the default component? Or does it have to be a child component of <agm-map>?

[accentureChris]

@akafaneh I've it working for both panTo and setCenter methods thanks to @piotrmach.

Here's my code: https://stackoverflow.com/questions/44315771/setcenter-not-working-in-angular2-google-maps/44333134#44333134

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tahirilahcen]

Is it possible to reference GMapsWrapper from the default component? Or does it have to be a child component of <agm-map>?

you can use (mapReady)='loadAPIWrapper($event)' as input function of <agm-map> and

intercept the event in component like
loadAPIWrapper(map) {
this.__MAP = map;
}

[ghost]

All of these answers are wrong. The reason that mapCenter doesn't update when setting to same coordinates, is because of angular's change detection, which ignores any parameters sets when there are no changes.

1. Let's say you set latlng to 30,30
2. Then you pan to 25,25, angular doesn't know that the map panned, and as far as angular is concerned, it's still at 30,30.
3. So when you set location back to 30,30, angular compares it to "previous" value, which it thinks was 30, 30, and does nothing.

The way to solve this is the following:

updateCenter() {
 this.lat = 0;
 this.lng = 0;
 this.changeDetector.detectChanges();
 this.lat = <desired value>;
 this.lng = <desired value>;
}

[ManolisPapaspyropoulosAUEB]

i think i find a solution,but i want to add a smooth transition on it

heres my code
(mapReady)="mapReady($event)"
....

map;
mapReady(map) {
this.map=map;
}

findMe() {
    this.map.setCenter({ lat: this.initLat, lng: this.initLng });

}

[cksagar]

All of these answers are wrong. The reason that mapCenter doesn't update when setting to same coordinates, is because of angular's change detection, which ignores any parameters sets when there are no changes.

1. Let's say you set latlng to 30,30
2. Then you pan to 25,25, angular doesn't know that the map panned, and as far as angular is concerned, it's still at 30,30.
3. So when you set location back to 30,30, angular compares it to "previous" value, which it thinks was 30, 30, and does nothing.

The way to solve this is the following:

updateCenter() {
 this.lat = 0;
 this.lng = 0;
 this.changeDetector.detectChanges();
 this.lat = <desired value>;
 this.lng = <desired value>;
}

Thnaks buddy after 4 hours of try this answer worked for me