I have integrated the following Framework into my Angular 6 project:
This is my first Angular project, so I am still navigating my way through it. The current status of my project is as follows: I have successfully loaded the map with a specific location as the center. The map is loading markers and clustering them when zooming out. There is a side menu listing all marker items with information about the location. I have also implemented user interaction functionalities: Hovering over a marker or list item in the side menu highlights the corresponding item in the list/map. Additionally, clicking on a marker or list item reveals detailed information in the side menu. So far, everything is working well.
Now, I aim to extract all markers located within the current bounds of the map to shorten the list in the side menu. In the component's template, I am using the map as shown below (extracted section):
[...]
<!-- 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: An array in the TypeScript document that contains information about various company locations.
#agmMap: Used to bind the HTML element to an object in the TypeScript file.
Now, onto the TypeScript section where I am facing challenges:
[...]
@ViewChild('agmMap') agmMap: any;
companyLocations: Array<CompanyLocation>;
filteredCompanyLocations: Array<CompanyLocation>;
[...]
checkMarkersInBounds() {
// Initialize Filtered Arrays as empty Arrays
this.filteredCompanyLocations = [];
// Iterate 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 am encountering an error with .getBounds():
TypeError: this.agmMap.getBounds is not a function.
When I attempt to replace
this.agmMap.getBounds().contains(loc)this.agmMap._mapsWrapper.getBounds().contains(loc)TypeError: this.agmMap._mapsWrapper.getBounds(...).contains is not a function.
I have tried several solutions from various sources for similar scenarios, but have not been able to find a resolution:
- https://github.com/allenhwkim/angularjs-google-maps/issues/762
- https://github.com/SebastianM/angular-google-maps/issues/696
- Angular 5 google maps : show only markers in radius of # kilometers
- How can I check the marker is or isn't in the bounds using google maps v3
I would appreciate any tips or solutions that can be provided. I have been struggling with this for days and may be missing something crucial to solve the issue...