Find zoom levels to fit third nearest point to the user

Question

The app that I am developing requires a map that zooms to include three stations nearest to the user. For that I need to find out the distance between the user and the station furthest from the user. Then I need to zoom the map to include that furthest station with the user at the centre. I know how to centre the user in the map or how to set the zoom level and do the centring. I have also learned a little about zoom levels. However, I can't seem to combine all this to achieve my goal. Can anyone enlighten me in that direction?

Answer 1

1) Iterate between your points and find the distance to your current location.

2) Find the three nearest points.

3) Create a bound in google maps, like this:

var bounds = new google.maps.LatLngBounds();

4) Extend that bound for all the three points.

bounds.extend(myLatLngPoint);

5) Fit Bounds:

map.fitBounds(bounds);

Let me know if you have problems with any point.

Answer 2

Sorry for digging up, but I would like to make @ericpap's answer more elegant. You do not need to find the distances in the first place. When the map is ready, in the ngAfterViewInit you can do the following:

map.component.ts

import { Component, OnInit, ViewChild, AfterViewInit  } from '@angular/core';
import { AgmMap } from '@agm/core';

declare var google: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit  {

  @ViewChild('AgmMap') agmMap: AgmMap;

  constructor() { }

  private agent1_lat = 40.940911;
  private agent1_lon = 26.317059;

  private agent2_lat = 40.942159;
  private agent2_lon = 26.319591;

  ngOnInit() {
    console.log('onInit')
  }

  ngAfterViewInit(){
    this.agmMap.mapReady.subscribe(map => {
        var bounds = new google.maps.LatLngBounds()
        bounds.extend(new google.maps.LatLng(this.agent1_lat, this.agent1_lon))
        bounds.extend(new google.maps.LatLng(this.agent2_lat, this.agent2_lon))

        map.fitBounds(bounds)
    })
  }

map.component.html

<agm-map #AgmMap [latitude]="lat" [longitude]="lon">
        <agm-marker [latitude]="agent1_lat" [longitude]="agent1_lon"></agm-marker>
        <agm-marker [latitude]="agent2_lat" [longitude]="agent2_lon"></agm-marker>
</agm-map>