How to reduce number of map calls in Angular Web App (agm-core)?

Question

We have a simple application made with Angular that has 5 pages, each with Google map. The reason we moved to Angular was so we could reduce the number of Map calls per user session to just 1 (in javascript based application, it was going upto 20 per session!).

However, our implementation still costs as many map calls as number of visits to each of these pages, and we would like to know what we are doing wrong.

Here's our setup:

• We are using agm-core library (and not JS script directly) We divided our app into 5 sub-components (each page with its own component) with a master component : /home. The map is imported in a separate component at the same level as Home component

• We also allow users to hide the map. For this, we tried two things: 1.) Set map height/width to zero. 2.) Push the map out of the boundaries of the screen, and bring it back when user wants to see it.

Our component structure:

- map-div
- home
  - page1
  - page2
  - page3
  - page4
  - page5

Clicking on each of the pages should not initialize map-div again, however, after testing and looking at the API calls in GCP, we realize that each page click is still counting towards Map calls.

Note: To test the number of API calls, we created a separate environment with a new key, and performed limited, traceable steps to identify the correct number of calls. Each click on Pages 1..5 was counted as a separate API call.

Below is the usage shown on GCP API/Services -> Credentials -> Key after clicking pages 1...5, total of 12 times.

Total usage (last 30 days)
12

We also looked at Transactions under Billing, and the number seems to be correct (charges for Dynamic Map calls).

We haven't gone through the code inside agm-core, and are trying to avoid overhead of implementing a custom class using Javascript in the hope that there must be a better way to do this. Please raise a comment if we can include more information / code.

How approach should we take so that each session only costs us 1 map load?

Thank you

Answer 1

Posting our solution if anyone else finds it useful.

We couldn't use agm-core maps class to accomplish this. Instead, we created our own custom class using Google Maps Javascript.

By doing so, we are able to reduce maps call, and limit it to once per user session (doesn't matter how many pages user visits in our web app).

Answer 2

You can't build it so that an user session costs you only 1 map load. There are no session-based nor caching options for JavaScript API, which is what the agm-core library uses underneath.

A map load means every time a map is created with the google.maps.Map() class. Even if you "hide" the map, if you still create it, then that counts. Each web page refresh that loads a map counts. So if each of those pages loads a map then it's expected that the number of map loads increases for every visit to said page (regardless of whether it's the same user session or not).

If you want to lower costs, besides removing the map creation from web pages where you do not need to display a map, I recommend you look into setting daily quota limits and budget alerts as per this FAQ.