setCenter not working in angular2-google-maps

user_697079 0
Viewed 16920
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.

angular2-google-maps angular typescript
3 Answers

google.maps.Map is accessible on MapReady event

<agm-map #geoMap [ngClass]="{'hide': !(showGeoMapDiagram$ | async)}"
    (window:resize)="onWindowResize()"    
    [latitude]="centerMapLat"
    [longitude]="centerMapLng"
    [mapTypeId]="mapTypeId"
    [mapTypeControl]="true"
    [zoom]="mapZoom"
    (mapReady)="onMapReady($event)"

>
</agm-map>

In code "event" contains an instance of google.maps.Map:

onMapReady(event: any)
  {
    this.diagramOverlay = new ShotDiagramOverlay();
    this.diagramOverlay.setMap(event);
    this.drawDiagramOnGeoMapSubscription = this.diagramOverlay.readyToDrawAction$.subscribe(() => this.drawDiagramOnGeoMap())
  }
user_62476160
Related