how to use setbounds in ng2-ui/map

Question

I have been trying to render map, where in I wish to use setbounds. The library that I am using is ng2-ui/map

https://github.com/ng2-ui/map

I am unable to get any documentation on how to do the same.

I have written the following code, as of now:

<ngui-map [center]=mapCenter zoom=15>
     <marker *ngFor="let pos of positions; let i= index;" [position]="pos" 
      [icon]= "{ url : mapMarkers[i]}"></marker>
</ngui-map>

where, center is average of all centers, and positions is an array of markers.

Answer 1

I just stumbled upon your question and you've probably solved it by now, but the answer might be helpful for others.

First, you need to get the instance of the map and the markers; for that ngui-map fires the mapReady$ and initialized$ events.

<ngui-map 
  zoom="15"
  (mapReady$)="onMapReady($event)">
  <marker *ngFor="let pos of positions; let i = index;" 
    [position]="pos"
    (initialized$)="onMarkerInit($event)"
    [icon]= "{ url: mapMarkers[i] }"></marker>
</ngui-map>

Then you have to implement those methods in your component class and use the Google Maps API as described here.

private bounds: google.maps.LatLngBounds;
private map: google.maps.Map;

onMapReady(map) {
  this.map = map;
  this.bounds = new google.maps.LatLngBounds();
}

onMarkerInit(marker) {
  this.bounds.extend(marker.getPosition());
  this.map.fitBounds(this.bounds);
  this.map.setCenter(this.bounds.getCenter());
}