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).
Video Walkthrough
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 Springfield, Illinois 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 "Springfield, IL" in satellite view, zoom 12.
Add a marker labeled "Downtown Springfield".Street View embed
A street view panel for a specific address.
Add Google Street View to this page for:
"111 S 10th St, Springfield, IL"
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 "Springfield, IL".
Show the route on the map and include a small panel with distance and ETA.