angular/components

Document approaches for lazy-loading the Google Maps API

Open

#17,828 opened on Nov 27, 2019

View on GitHub
 (27 comments) (5 reactions) (1 assignee)TypeScript (24,044 stars) (6,650 forks)batch import
P3area: google-mapsdocsfeaturehelp wanted

Description

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.

Contributor guide

Tech stack
typescriptangular
Domain
frontendperformance
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
AngularLazy loadingGoogle Maps API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Review the existing Google Maps integration in angular/components (likely in src/google maps). Examine how the script is currently loaded. Read the issue comments for additional context, especially from @mbehrlich and other maintainers. Research standard lazy loading techniques for third party scripts in Angular (e.g., using APP INITIALIZER, dynamic script loading, or intersection observers). Document multiple approaches with code examples, including trade offs. Consider providing a guide that shows how to defer loading until a map component is first rendered.
Document approaches for lazy-loading the Google Maps API · angular/components#17828 | Good First Issue