I'm creating a dataset control which will load a map via the Google Maps Javascript API and display data from each of the records in the dataset.
The issue I have is that, as far as I can tell, the Google Maps Javascript API library must be loaded from Google's servers at runtime by inserting a script element into the DOM as part of the control's init() method. The script element has the onload property set to execute a callback function (initMap) which creates a new instance of the google.maps.Map object and displays the map.
This is all fine except that I need the new google.maps.Map object to persist outside of initMap() so I can access it later from the updateView() method to manipulate the map. I've tried to achieve this by extending the Window interface to allow the creation of a global variable while maintaining strong typing, however the PCF validation script then throws an error on build.
Here's an example:
declare global {
interface Window { myMap: google.maps.Map }
}
[pcf-1022] [Error] Control source code declares an internal module or namespace.
I realise I could work around the error by doing something like this:
(<any>window).myMap = new google.maps.Map(...);
but that destroys any further type checking on the map object which is what I want to avoid.
Is there another way to create a global variable on the window object without the PCF validation script complaining? If not, is there another way to persist the map object between initMap and updateView?