AI and maps
Add Google Maps, place search, and directions
Div-idy can build React pages with Google Maps, location markers, place search, and directions through its built-in Maps integration. Describe the visitor’s task and supply accurate location details. You do not need to paste a Maps API key into your generated app.
Choose what visitors should do on the map
A map can show one business, compare store locations, display event venues, search for places, or draw directions between stops. Explain the useful action: selecting a location, filtering a category, choosing a start point, or opening route details.
Provide confirmed addresses or coordinates for your own locations. Include a readable location list with names and addresses so visitors can still use the page if the map is unavailable.
Describe the map and surrounding controls
- Specify the starting area and the locations to show.
- Ask for a responsive map with a visible height on mobile and desktop.
- Describe marker labels, selection details, filters, and any place-search field.
- Request loading and error states plus a useful text fallback.
- Trigger route requests from a clear action, rather than every keystroke.
New React output loads the supported Maps library through maps.load. Div-idy handles the loader. Your app should use real place and routing results for locations, distances, and travel times.
Example: a venue finder
Build a venue finder with a searchable location list and an interactive Google Map. Use the venue names, addresses, and coordinates I provide. Selecting a card should highlight its marker and show details. Add a starting-address field and a Get directions button. Keep the address list visible if Maps cannot load, and make all controls work on mobile.
Test where visitors will use the map
The secure overview preview does not run live Maps. Open the full-page preview from the builder to test the map, then verify markers, place search, and directions on the published page. If you use a custom domain, test that address separately: Maps availability depends on the platform’s configuration and allowed domains.
If a map loads on one address but fails on another, keep the fallback useful and contact support with the affected URL and error. Do not add a second Maps loader or an API-key form.
Maintain locations in the database
Use owner-managed records for locations you edit over time, then read only published records on the visitor page. Store ordinary fields such as name, address, latitude, longitude, and category.
Follow the location directory guide for the full content workflow. If saved routes are browser-local, label them “saved on this device.”