What I am trying to do:
By using JAVA and React, I am looking to create an app to display all restrooms (for example and assume it is possibly close to a million of records within the table) in France as plot points in Google Maps. I have a database that stores all restrooms in the entire country in X and Y coordinates. (I am aware that restrooms may not be the ideal example but lets just go with this).

What issue am I encountering:
However, I would like to understand the most optimized approach in loading all these restrooms on the current visible area of Google Maps on the user’s screen and to reduce the load on the database.

Here are 2 ideas that I have thought of so far:

First idea:
I started off thinking to load all restroom locations in France. But it should cause tremendous stress on the database as all users will have to retrieve all restrooms in the table on load.

Second idea:
I have also thought of loading the plot points only on the visible map currently shown on the user’s screen. With this, I would cache the already loaded plot points and retrieve from database when user zooms out or moves to another area in Google Maps.

My question:
I feel that the second idea is the best approach. I would now like to check with the community whether is there a better way to tackle this situation?