Visualize data from json file to google maps

I have a JSON format file from Google sheets API. I need to mark the addresses in the JSON file and display the percentage of job completion when you click on the marked address. I know I can display the data on the map, but I need the data on the map to be updated in real-time (sync with Google sheet data).

Sample JSON:

> [{"STAGES/ /JOB LIST":"JOB 1","ADDRESS":"4 Talbot Drive","CITY/ STATE/ ZIP CODE":"Panorama City, CA 91402","STAGE 1":"COMPLETED","STAGE 2":"COMPLETED","STAGE 3":"COMPLETED","STAGE 4":"COMPLETED","STAGE 5":"COMPLETED","STAGE 6":"COMPLETED","STAGE 7":"COMPLETED","STAGE 8":"COMPLETED","STAGE 9":"COMPLETED","STAGE 10":"COMPLETED","TOTAL PROGRESS":1,"":0},
......
{"STAGES/ /JOB LIST":"JOB 10","ADDRESS":"46 Van Dyke Dr.","CITY/ STATE/ ZIP CODE":"San Jose, CA 95123","STAGE 1":"IN PROGRESS","STAGE 2":"COMPLETED","STAGE 3":"PENDING","STAGE 4":"PENDING","STAGE 5":"PENDING","STAGE 6":"PENDING","STAGE 7":"PENDING","STAGE 8":"PENDING","STAGE 9":"PENDING","STAGE 10":"PENDING","TOTAL PROGRESS":0.1,"":1},{"STAGES/ /JOB LIST":"PROGRESS ON THIS STAGE","ADDRESS":"","CITY/ STATE/ ZIP CODE":"","STAGE 1":0.9,"STAGE 2":0.9,"STAGE 3":0.8,"STAGE 4":0.7000000000000001,"STAGE 5":0.5,"STAGE 6":0.4,"STAGE 7":0.30000000000000004,"STAGE 8":0.2,"STAGE 9":0.1,"STAGE 10":0.2,"TOTAL PROGRESS":0.5,"":9},{"STAGES/ /JOB LIST":"","ADDRESS":"","CITY/ STATE/ ZIP CODE":"","STAGE 1":"","STAGE 2":"","STAGE 3":"","STAGE 4":"","STAGE 5":"","STAGE 6":"","STAGE 7":"","STAGE 8":"","STAGE 9":"","STAGE 10":"","TOTAL PROGRESS":"","":""}]

Appreciate your help.

To mark addresses on a map and display the percentage of job completion when clicked, you can use a combination of Google Maps API and a mechanism to sync the data in real-time. Here's a high-level overview of the steps involved:

Obtain an API key: Get an API key from the Google Cloud Console to access the Google Maps API.

Set up a map: Create a web page or application where you can display the map using HTML, CSS, and JavaScript.

Integrate the Google Maps API: Use the Maps JavaScript API to embed the map on your web page and display markers for the addresses.

Fetch and process the JSON data: Retrieve the JSON data from the Google Sheets API and parse it in your application.

Geocode addresses: Use a geocoding service, such as the Google Geocoding API, to convert the addresses into latitude and longitude coordinates for placing markers on the map.

Update map markers: As you fetch new data or receive updates from the Google Sheets API, update the markers on the map accordingly.

Calculate job completion percentage: Determine the percentage of job completion based on the data you have, and associate it with each marker.

Add click event listeners: Attach click event listeners to the markers on the map. When a marker is clicked, display the corresponding address and job completion percentage.

Real-time data sync: To sync the Google Sheets data in real-time, you have a few options. One approach is to use the Google Sheets API's "Push" functionality, where your application subscribes to updates and receives notifications whenever the sheet data changes. You can then update the map markers accordingly.

Continuously update map data: Implement a mechanism, such as polling or WebSocket connections, to periodically fetch the latest data from the Google Sheets API and update the map markers accordingly.

By following these steps, you can create a dynamic map that displays the addresses, job completion percentage, and syncs with the Google Sheets data in real-time. Remember to handle any authentication and authorization requirements for accessing the Google Sheets and Maps APIs securely.