Skip to content

Asynchronous Loading of Google Maps in ReactJS

The traditional method of loading Google Maps has been to use an iframe embed. Unfortunately, this interfered with the ‘blazing fast’ goals I’ve had for using Google Maps. Loading the embed delayed First Paint and First Meaningful Interaction significantly, and that just wasn’t good enough.

The solution I ended up using was the following:

Create a component I could stick right above the closing body tag of the HTML page, in this case named GoogleMapsScript

class GoogleMapsScript extends React.Component {
    constructor(props) {
      super(props)
    }
    componentDidMount() {
        const script = document.createElement("script");

        script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBgS5MUhIaBpgqp0Vg5ZCI9H3ZsgGmwO6M&callback=initMap";
        script.async = true;
        script.defer = true;

        this.instance.appendChild(script);
    }
    render() {
        return (
(this.instance = node)} />) } } export default GoogleMapsScript

The use of refs in React allows run-time modification of the DOM node to add the script tag. The only issue with this approach is that the JavaScript API for Google Maps loads a large amount of images that slow overall load times, but this can be rectified by using something like the IntersectionalObserver API to lazy load.

Published injavascriptReactJSUncategorized

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *