Shopify App - Dynamic Google Maps Data

ashergm
Shopify Partner
1 0 0

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 (
        <div>
            <ul>
                {drivers.map((user) => (
                <li key={user.id}>
                    { user.name } is at {user.lat}, {user.lng}
                </li>               
                ))}
            </ul>
            
            <SimpleMap />

        </div>
    );
}

 

 

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%' }}>
    <GoogleMapReact
      bootstrapURLKeys={{ key: "ADD-YOUR-OWN-KEY" }}
      center={CVG_CENTER}
      zoom={13}
    />
  </div>
  
  );
  
   
    
}

 

 

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)