javascript multithreading google-maps npm web-worker

Web Worker threads for Google Maps

I am trying to use web worker threads to grab directions between multiple pairs of locations parallelly and store the text in a file in the end. Everything had gone well in the sequential approach. I am using npm live-server to display the page. But the browser just closes the page instantly after it loads and I don't even get to see what rendered or consult the console for errors. If I use 'async defer' for my script tag with the google Api in index.html, I would get the "UncaughtReferenceError: google is not defined" error. Thanks in advance guys!

Here is my index.html:

<!DOCTYPE html>
<html>
<head>
   <title>Simple Map</title>
   <meta name="viewport" content="initial-scale=1.0">
   <meta charset="utf-8">
   <style>
       #map {
           height: 100%;
           width: 100%;
       }
       html, body {
           height: 100%;
           margin: 0;
           padding: 0;
       }
       panel {
           display: block;
       }
   </style>
   </head>
   <body>
       <panel></panel>
       <div id="map"></div>
       <script src=locations.js></script>
       <script src='main.js'></script>
       <script src='worker.js'></script>
       <script src="https://maps.googleapis.com/maps/api/js?key=<API-KEY>&callback=initMap"></script>
   </body>
</html>

Here is my main.js:

let worker = new Worker('worker.js');
worker.onmessage = function(info) {
    output += info.data;
};

const container = document.querySelector('panel');
let output = ""

function initMap() {
    locations.forEach( spot => {
        worker.postMessage(spot);
    });

    download("data.txt", output, 'text/plain');
    console.log("Output: " + output);
}

function download(name, text, type) {
    const file = new Blob([text], {type: type});
    const atag = '<a href="' + URL.createObjectURL(file) + '" download="' + name + '">Download</a>';
    container.insertAdjacentHTML('afterbegin', atag);
}

And, finally the worker.js:

let directionsService;
let directionsDisplay;
let map;
self.addEventListener('message', (e) => {
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
    const mapOptions = {
        center: {lat: 30, lng: -90},
        zoom: 6
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    directionsDisplay.setMap(map);
    let request = {
        origin: 'New Orleans, LA',
        destination: e.data,
        travelMode: 'DRIVING',
        provideRouteAlternatives: false,
        drivingOptions: {
            departureTime: new Date('September 7, 2018 15:00:00'),
            trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
    };

    directionsService.route(request, (result, status) => {
        if (status == 'OVER_QUERY_LIMIT') {
            console.log('over');
        }
        if (status == 'INVALID_REQUEST'){
            console.log('other status')
        }
        if (status == 'OK') {
            var data = result["routes"][0].legs[0];
            postmessage(e.data + ", " + data["distance"].text + ", " + data["duration"].text + "\n");
            directionsDisplay.setDirections(result);
            console.log(result);
        }  
   });
   self.close();
});

Solution

Web workers have their own scope in Javascript. This means any scripts you loaded in the scope of the web page will not be available in the scope of the web worker.

Usually you use the importScripts call to load a script. However this won't work in your case because you also try to access the DOM in the web worker. This is not possible in a web worker for a number of reason (most important would be concurrent access to a data structure which is not thread save).

Looking at your code I don't think you need a web worker to calculate the routes. Most likely the actual routing is done on one of Googles servers anyway. Since this would be async anyway you do not need to worry about blocking the UI of your web page.