Our team has developed a user-friendly application using Angular with 5 pages, each featuring a Google map. The main reason for choosing Angular was to minimize the number of Map calls per user session to just 1; previously in our javascript-based app, this number was as high as 20 per session!
Despite our efforts, the current implementation still results in multiple map calls corresponding to the number of visits to each page. We are seeking guidance on where we may have gone wrong.
Here is how our setup looks:
We utilize the agm-core library (instead of JS script directly) and segment our app into 5 sub-components (each representing a page) with a master component: /home. The map is imported in a separate component at the same level as Home component
We provide users with an option to hide the map by either setting map height/width to zero or moving the map off-screen and bringing it back when needed.
Component structure:
- map-div
- home
- page1
- page2
- page3
- page4
- page5
Although clicking on different pages should not trigger reinitialization of map-div, our testing reveals that each page click still contributes to additional Map calls, as observed in GCP API logs.
Note: For assessing API call counts, we set up a distinct environment with a new key and meticulously tracked steps taken to determine the accurate count. Every click on Pages 1...5 registered as a unique API call.
Below details the usage displayed under GCP API/Services -> Credentials -> Key after engaging with pages 1 to 5, totaling 12 interactions.
Total usage (last 30 days) 12
We confirmed the transaction data in Billing, which reflects the charges for Dynamic Map calls accurately.
While we haven't delved deep into the code within agm-core yet, we aim to avoid creating a custom JavaScript class to tackle this issue. Any suggestions on a more efficient approach would be deeply appreciated. Feel free to request more details or code snippets if required.
How can we modify our approach to ensure that each session incurs only 1 map load?
Thank you