How to Connect Map Locations to a Database
Want your map markers to come from your database? In Div-idy, you can do that with a prompt. It also helps to include an example of your location data (name + address or lat/lng) so Div-idy can generate the mapping logic correctly.
Quick Answer
To connect map locations to a database, tell Div-idy to load locations from your database and place them on the map as markers. If you provide an example of your location records (like name, address, and optional lat/lng), Div-idy can build the map + list UI faster and more accurately.
“Connect my database ‘locations’ to the Google Map and render a marker for each record. Use the address field to geocode if lat/lng isn’t present, and show a list next to the map.”
Step-by-Step
Open your project and your Database tool
Start in your project dashboard, then open the database tool so you can store locations.
Open: /myaccount
Open your project → open the Database tool.Create a locations table/collection
Add a table/collection named something like locations. Use fields that make sense for maps (address or lat/lng).
Recommended fields:
- name (text)
- address (text) // optional if you use lat/lng
- city (text) // optional
- state (text) // optional
- zip (text) // optional
- lat (number) // optional
- lng (number) // optional
- phone (text) // optional
- hours (text) // optionalAdd 1–3 example records
Adding a couple example rows helps Div-idy understand what to render on the map and in the list.
Example record:
{
"name": "Downtown Location",
"address": "123 Main St, Omaha, NE 68102",
"phone": "(402) 555-0199",
"hours": "Mon–Fri 9am–5pm"
}Prompt Div-idy to connect the database to the map
Tell Div-idy which database table/collection to use and what you want on the map.
Prompt example:
Add a Google Map to this webpage and connect it to my database table "locations".
Load all records and add a marker for each location.
If lat/lng is missing, use the address field to place the marker.
Show a list next to the map with name, address, phone, and hours.
When a user clicks a list item, zoom to that marker and open an info window.Generate and iterate
Click Generate, then refine the behavior and UI with simple prompts.
Follow-up prompt examples:
- Add filters for city/state and “Open now”.
- Add a search box to filter locations by name or zip code.
- Highlight the selected marker and scroll the list to the active location.
- Make the map full width on mobile and show the list below it.Prompt Examples You Can Copy
Markers from database (address-based)
Use addresses from the database to place markers automatically.
Connect my database table "locations" to a Google Map.
Each record has { name, address, phone }.
Place a marker for each location using the address field.
Add an info window showing name + address + phone.Markers from database (lat/lng-based)
Fastest/most reliable: store latitude/longitude and place markers directly.
Add a Google Map and connect it to my "locations" table.
Each record has { name, lat, lng }.
Render markers using lat/lng and show an info window with the location name.Store locator UI + database
A map + list locator where the database is the source of truth.
Build a store locator page and connect it to my database table "locations".
Fields include: name, address, city, state, zip, phone, hours.
Add search by city/zip, show results in a list, and place markers on the map.
Clicking a result should center the map, open the marker info window, and highlight the list item.