Document approaches for lazy-loading the Google Maps API

[epelc]

Feature Description

So great to see google maps being added as apart of this library. I have had an internal version for my own projects for some time(back since angular.js and now upgraded/rewrite for angular 2+) now which wrapped the google maps lib to provide an angular integration.

One of the major issues we had was you do not want to wait for or load the google maps api on every page when it isn't needed. For our use case we were only using it on a details page for 2 records + on some reports if they happened to have a map. It required some heavy changes to make all google map related calls actually start from a promise/observable which loads the sdk first if it isn't already present.

I get that there is the async and other script tags to defer loading but still once you need this feature it is basically a must have and it also requires some hard API changes so I'd really hope it's could be applied sooner rather than later.

I currently have directives/components for the following:

• routes
• markers
• heat maps
• the map itself

@mbehrlich From release notes I think you are the primary person working on maps. Would be great to get your thoughts on this.

Use Case

Most apps aren't loading maps on every page and the maps sdk is quite large if you aren't using it.

[jelbourn]

@epelc to clarify, are you talking about dynamically loading the Angular component or dynamically loading the underlying Google Maps API? Currently the Angular component shouldn't have any opinions about how/when the underlying maps API is loaded.

[epelc]

I am saying to dynamically load the underlying maps api. Usually you could manage yourself but I guess you’d need the library to either expose this loading(I used this option to great effect) or have it be able to request the maps lib be loaded when it is needed. Does that make sense?

[jelbourn]

The Angular component doesn't care when the Google Maps API is loaded, so long as it's before you try to show the Angular component. Here's an example that dynamically loads the Google Maps API before showing the component: https://stackblitz.com/edit/angular-sym9gg

[christiaan-lombard]

I agree with @epelc on loading the SDK only when you are actually showing an instance of a map. I required 2-way-binding with map markers and polygons so I developed a similar Google Maps Angular wrapper for internal use.

To achieve this I had a GoogleMapsApiLoaderService inject the maps api script and provide an observable to fire when the script is loaded. The map component would init this service and wait for the script before attempting to access anything under google.maps namespace. Components nested in the Map components gets a reference to the Map so they, in turn, wait for the map to initialize before attempting to use the google.maps namespace.

Regardless of how you are async loading the maps api script, it opens up a can of worms. Here are some of the problems I ran into:

• The maps api uses lots of enums. You cannot use these enums in configuration constants unless the api is already loaded. Thus, I had to redeclare enums and options interfaces for static configuration.
• I needed to store the map marker locations, zoom, polygons, etc in state and in form controls. This meant I had to constantly convert from MVCObjects to object literals and vice versa.

Here is an example of a Polygon directive with 2-way binding: polygon.directive.ts

[philip-firstorder]

Would be nice to have an onReady() output event similar to the one in the agm library here.

@Output() mapReady: EventEmitter<any> = new EventEmitter<any>();

I toggle the google-map with an *ngIf and I need to know when it appears again to add my Drawing Controls on it.