Div-idy logo

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).

Updated Time: ~2–3 minutes Audience: Beginners
Open My Projects Create a Web App Browse all docs

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.

Example

“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

1

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.
2

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".
3

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)
4

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.
5

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

A

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".
B

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.
C

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.