Lazy load google maps with web components

A lot of websites use google maps or other map related libraries for showing Map to the end user.  This is generally a demo of how we can setup third party libraries which use callback for executing application code after they have been loaded.

Problem Statement

The very basic implementation of google maps involves using callbacks that will be executed once the library is loaded.

However this makes the code pretty much non-module friendly.

What if we want to share google.maps object across modules so that they can use it in their code.

Possible Solution

Default behaviour would be to load google maps library in the background only after the page has been completed ( window.load event has been fired).

Create a google map loading service (singleton in nature), which would try and load google maps library when called for the first time and then just return google.maps object every subsequent time.

Here I am trying to replicate the approach using web components.

NOTE — this is not a tutorial for learning web components.

Here is what we are going to do —

1. Create a web component for map container.
2. Create an universal event bus.
3. Emit window.load event.
4. Make changes to the web component to listen to the window.load event and load google maps library.

Step 1 : Creating custom element

Here I am trying to create a simple web component using custom element technique.

Step 2: Creating Universal Event Bus

We need to create a global event bus, so that web component can listen to the window.load event.

A global event bus gives us more flexibility on how we want to handle events in our application.

Here we implement singleton pattern for event bus. If the instance of the EventBus already exists, we return that instance, otherwise we create a new instance in the getInstance() method.

Step 3: Use EventBus to emit window.load event

Now as we have our EventBus ready, all we need to do is, use it in our main file to register window.load event.

Step 4.1: Load Google Maps Library

Its a shame I am not able to list it out as a separate point as this is the main point of this article.

Moving on, all we have to do here is load google maps using promises and then dynamically inject the script into the document.

Again singleton pattern is used here because we want to avoid creating multiple instances of google maps library with the increase in number of map components in a page.

In loadGoogleMapLib we are trying to check if google.maps is already present, we resolve the promise using google.maps otherwise we ask the script loader to load google maps library and add it dynamically to the page.

Now we need to add call toloadGoogleMapLib() in our onLoad event handler inside web component page. (inside handleOnLoad() )

Step 4.2 — Updating the google map web component

In order to complete the functionality, we need to make these changes to the earlier created web component.

• Making changes in web component to subscribe to window.load event.
• writing a render method which is executed after the onLoad event.

Demo and Results

As you can see google maps was loaded after load event. This significantly increases pagespeed as we defer google maps to be loaded to a very later stage, while not compromising with the code reusability.