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.
Finally got this working. Had to create a child component of
agm-map
and create an output that on load, grabs the native google maps api wrapper and passes into my parent map component. I wish they made it so you could just grab the gmaps api wrapper in the regularagm-map
component. Works with panTo as well.PARENT COMPONENT MARKUP
PARENT COMPONENT
CHILD COMPONENT
Perhaps it's been added since Christopher posted his solution, but agm-map has a mapReady event that returns the raw map object that you can use to access setCenter().
Modification of your original code:
Then add the following to agm-map