FROM CACHE - en_header

Shopify App - Dynamic Google Maps Data

Shopify Partner
1 0 0



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( => ));
    }, [])

    return (
                { => (
                <li key={}>
                    { } is at {}, {user.lng}
            <SimpleMap />




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 (

    <div style={{ height: '100vh', width: '100%' }}>
      bootstrapURLKeys={{ key: "ADD-YOUR-OWN-KEY" }}



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?


Replies 0 (0)