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
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).