I’m working on an Angular project where I use the agm-map component to display a Google Map. In my component, I refresh the agm-map every 20 minutes. The backend provides a pre-calculated list of markers with coordinates, which I then display on the map. Usually, users don’t interact with the map—it just shows a global view at zoom level 4 with the relevant markers. I originally assumed this setup would only count as one map load every 20 minutes. However, after checking the network activity, I noticed that multiple requests are made when the map loads. It seems like the map loads different parts in separate calls. When I reviewed the billing details, the number of map loads didn’t match my expectations, and I have no clear way to track how many requests are made in each 20-minute interval. The current API pricing is turning out to be too expensive, and I’m not sure how to optimize or reduce the number of map loads. Also, agm-map doesn’t give me any control over the number of outbound requests made to Google Maps. How can I reduce these calls and better track or control the number of map loads to keep costs down? Following is a sample of my code <agm-map #AgmMap [latitude]="mapCenterLat" [longitude]="mapCenterLon" style="height:600px;" *ngIf="displayMap" [disableDefaultUI]="false" [zoom]="4" [zoomControl]="true"> <agm-marker *ngFor="let location of mapdata; let i=index; " [latitude]="location.Lat" [longitude]="location.Lon" [title]="location.Address+' : '+i" [iconUrl]="location.Icon" [markerDraggable]="false" (markerClick)="markerClicked(location.Address, infoWindow)" > <agm-info-window #infoWindow> <div *ngIf="SelectedMarker"> <span style="font-weight: bold;"> Location: </span>{{SelectedMarker.Address}} </div> </agm-info-window> </agm-marker> </agm-map> Continue reading...
