[feat] Populate the Map with Project Markers

[itsliterallymonique]

This week you will be creating the function that will populate the map with project markers whenever the user loads the home page! Here is what you will need to do:

1. Create the function that will query all projects in the database
   a. Create a query file (.tsx) inside api >> supabase >> queries
   b. You only need to fetch the project name, renewable energy type, latitude and longitude!
2. Create a function that adds a marker to the map
   a. Add this function to api >> google maps. This is because we might need to use this function in other ways!
   b. Only add markers to the map where the "approved" column in the database is TRUE
3. The marker will need to:
   a. When hovered on, display the project name
   b. Use the default pin marker
4. Add Documentation on this to our MTP documentation file on notion

Some things that might be helpful:

• Take a look at useEffects
• Google Maps Documentation on adding markers: https://developers.google.com/maps/documentation/javascript/advanced-markers/add-marker
• Take a look at Google Maps API info windows for displaying the project name: https://developers.google.com/maps/documentation/javascript/infowindows
• Take a look at marker.addListener for hovering!
• You can check Deena’s query from her sprint for how to begin (just note your query will be different)

PR Reviewers: Justin Lee (@jjstnlee) and Monique (@itsliterallymonique)