Search code examples
angulartypescriptgoogle-mapsangular-google-maps

Angular Google Maps get all locations inside the maps boundaries

I'm using this Framework in an Angular 6 project:

It's my first project with Angular so I'm still figuring out how it works at some points. The status of my project right now is the following: I'm able to load the map with a specific location as the centre. It's also loading markers and clusters them when zooming out. In a sidemenu all markeritems are listed and show some information about the location. I also implemented some user interaction: Hovering on a marker or listitem in the sidemenu highlights the corresponding item in the list/map. Also some detailed information is shown in the sidemenu when clicking on a marker or listitem. So far so good.

Now I want to extract all markers which are located inside the current bounds of the map to shorten the list in the sidemenu. In the Template of the Component I'm using the map as following (I've extracted the part where the map is used):

[...]

<!-- Map Section -->
<div class="main-data-container content-box">
  <div class="split-view-container" #parentData>
    <app-spinner *ngIf="!allItems"></app-spinner>
    <agm-map [style.height.px]="parentData.offsetHeight"
             [latitude]="mapCenter.lat"
             [longitude]="mapCenter.lon"
             [zoom]="mapZoom"
             #agmMap>
      <agm-marker-cluster [styles]="[companyStyle]">
        <agm-marker
          *ngFor="let companyLocation of companyLocations"
          (markerClick)="clickedMarker(companyLocation)"
          (mouseOver)="hoverOverMarker(companyLocation)"
          (mouseOut)="hoverOutMarker(companyLocation)"
          [latitude]="companyLocation.latitude"
          [longitude]="companyLocation.longitude"
          [iconUrl]="{url: setIcon(companyLocation), scaledSize: {width: 55, height: 82.5}}">
        </agm-marker>
      </agm-marker-cluster>
    </agm-map>
  </div>

  [...]

companyLocations: Array in the typescript document which holds the information about several locations of companies.

#agmMap: With this I bind the html element to an Object in the typescript file.

Now to the Typescript part where I'm struggling:

[...]

@ViewChild('agmMap') agmMap: any;

companyLocations: Array<CompanyLocation>;

filteredCompanyLocations: Array<CompanyLocation>;

[...]

checkMarkersInBounds() {

    // Initialize Filtered Arrays as empty Arrays
    this.filteredCompanyLocations = [];

    // Run through all CompanyLocations
    for(let company of this.companyLocations){

      //write coordinates from companyLocation into LatLng Object 
      let loc: LatLngLiteral = {lat: company.latitude, lng: company.longitude};

      //Check if the Location is in Bounds of the Map
      if (this.agmMap.getBounds().contains(loc)){

        //If it's in Bounds add it to the filtered Array
        this.filteredCompanyLocations.push(company);

      }
    }
  }

[...]

I'm getting an error on .getBounds():

TypeError: this.agmMap.getBounds is not a function.

When trying to switch out this.agmMap.getBounds().contains(loc) with this.agmMap._mapsWrapper.getBounds().contains(loc) it throws:

TypeError: this.agmMap._mapsWrapper.getBounds(...).contains is not a function.

I already tried several solutions postet here and elsewhere for different but similar Intentions and adapt it to my application:

I hope someone's got some tips or even a solution. I'm struggling with this since days. Maybe I just got blind for this problem to solve it and I'm overlooking something essential...

Solution

  • I found a way to solve this. In the Template add an event output to the (boundsChange) Output of the map. This gives back the bounds of the map and is also triggered when the bounds change (obviously):

    [...]
<agm-map
        [style.height.px]="parentData.offsetHeight"
        [latitude]="mapCenter.lat"
        [longitude]="mapCenter.lon"
        [zoom]="mapZoom"
        (boundsChange)="checkMarkersInBounds($event)">
[...]

    In the TS file I implemented the checkMarkersInBounds(bounds) Method like this:

    checkMarkersInBounds(bounds) {

    this.filteredItems = [];

    for(let company of this.companyLocations){

      let companyPosition = {lat: company.latitude, lng: company.longitude};

      if (bounds.contains(companyPosition)){

        //Put the item in an Array which can be shown in the List

      }
    }
  }