How to dynamically update Google Maps data in a Shopify app?

Technical Q&A
1

Hi,

I’m working on an app to track customer deliveries. I have completed a companion mobile app for Drivers which updates location data (lat/long) to Firebase/Firestore. I can see that data dynamically updating fine within a text label but I’m struggling to have the map update itself on data change.

Currently i’m using useEffect() to take a snap of the Firestore using onSnapshot().

Here is the sample index.js

import React from "react";
import { onSnapshot, collection} from "@firebase/firestore";
import { useEffect, useState } from "react";
import db from "./firebase";
import SimpleMap from "../map";

export default function Index() {

    const [drivers, setDrivers] = useState([ { name: "Loading..", id: "initial"}]);

    useEffect( () => {
                onSnapshot(collection(db, "drivers"), (snapshot) => 
                setDrivers(snapshot.docs.map((doc) => doc.data()) ));
    }, [])

    return (
        
            

                {drivers.map((user) => (
                - { user.name } is at {user.lat}, {user.lng}
                               
                ))}
            

            
            

    );
}

and the Map.js component (ADD-YOUR-OWN-KEY = Google Maps API Key)

import React from "react";
import GoogleMapReact from 'google-map-react';
import CVG_CENTER from '../const/cvg_center';

export default function SimpleMap(){

  return (

    
    

  
  );
  
   
    
}

It seems like I can find solutions for a lot of scenarios that don’t apply to Shopify’s pref stack. I’ve run into issues updating the map due to Next and ESLint. Is there a Shopify Node preferred approach to dynamically updating maps?