How to Add Google Maps to a Webpage
In Div-idy, adding Google Maps is simple: just type that you want a map added and describe the exact format you want (satellite view, street view, markers, directions, and more).
Quick Answer
To add Google Maps, just prompt for it. Tell Div-idy you want a Google Map on your page and describe the view you want (example: satellite view, street view, or a standard map), plus the location and any features like markers, directions, or zoom level.
“Add a Google Map to this page centered on Omaha, Nebraska in satellite view with a marker labeled ‘Div-idy HQ’. Start at zoom level 12 and make the map full width.”
Step-by-Step
Open the project you want to update
Go to your dashboard and open the project where you want to add the map.
Open: /myaccount
Select a project → open the editor.
Prompt for the map and the format
In your prompt, say you want Google Maps added and describe the exact type of map you want.
Prompt example:
Add Google Maps to this webpage.
Use roadmap view centered on "1600 Amphitheatre Parkway, Mountain View, CA"
and include a single marker titled "Google HQ".
Ask for the features you want
Add details like zoom level, multiple markers, labels, directions, or street view.
Feature ideas you can include:
- Satellite view / roadmap / terrain
- Street View at a specific address
- Zoom level (ex: zoom 10, zoom 14)
- Multiple markers + labels
- Directions (A → B) and route display
- Search box for changing locations
- Map size: full width, fixed height (ex: 420px)
Generate and test
Click Generate and confirm the map loads and behaves correctly on desktop and mobile.
Click: Generate
Test: zoom, drag, markers, and layout responsiveness.
Iterate with simple follow-up prompts
If it’s close but not perfect, just prompt adjustments.
Follow-up prompt examples:
- Make the map full width and increase height to 500px.
- Switch to satellite view and set zoom to 13.
- Add three markers for Chicago, St. Louis, and Kansas City.
- Add Street View for Times Square and show it below the map.
Prompt Examples You Can Copy
Satellite view map
A map centered on a city in satellite mode with a labeled marker.
Add a Google Map to this page.
Center it on "Omaha, NE" in satellite view, zoom 12.
Add a marker labeled "Downtown Omaha".
Street View embed
A street view panel for a specific address.
Add Google Street View to this page for:
"111 S 10th St, Omaha, NE"
Put it in a 16:9 container under the hero section.
Directions (route) map
Show directions between two points.
Add a Google Map with directions.
Route from "Lincoln, NE" to "Omaha, NE".
Show the route on the map and include a small panel with distance and ETA.