0 items
Sign in
Buy

Docs

Enabling 3D maps in the Maps Layout

Estimated reading: 8 minutes

Updated on August 18, 2026

The Maps Layout can display your Gravity Forms entries on Google’s photorealistic 3D maps. Once enabled, your map gets a 3D button that re-renders the map in three dimensions, with buildings, terrain, and full zoom, pan, and rotate controls. Visitors can switch between 2D and 3D at any time. This article explains how to turn 3D maps on, how to control how the map opens, and what to expect on the front end.

3D map types were added in Maps Layout 3.8.0. The Starting View and Minimum Zoom for 3D settings described below were added in Maps Layout 3.10.0.

Prefer to watch the video? #

Before you start #

Make sure you have the following in place:

  • Maps Layout 3.8.0 or later. For the Starting View and Minimum Zoom for 3D settings, you need 3.10.0 or later. Update from GravityKit, then Manage Your Kit.
  • A working map. Your View already displays entries on a Google map, either as a Map View or as any other View layout with the Multiple Entries Map widget added. If you’re new to the Maps Layout, start with Getting started with the Maps Layout.
  • A Google Maps API key with the Maps JavaScript API enabled. This is the same key the Maps Layout already uses; 3D maps don’t require an additional Google API. See Signing up for a Google Maps API key.
  • A satellite-based map type. 3D works with the Satellite and Hybrid map types (and their 3D versions). The Street and Terrain map types don’t offer 3D.

Note: Google’s photorealistic 3D maps are not available everywhere. Detailed 3D imagery covers many populated areas but not every location, and Google does not offer 3D maps in the European Economic Area (EEA). Where 3D is unsupported, or if it fails to load in the visitor’s browser, the map silently falls back to the matching 2D Satellite or Hybrid map.

Enable 3D map types #

3D is off by default and is turned on per View.

  1. Edit your View and scroll down to the View Settings box.
  2. Click the Maps tab.
  3. Under 3D Maps, check Enable 3D map types.
  4. Open the Map Type dropdown. Two new options now appear: 3D Satellite and 3D Hybrid. Choose the one you want.
    • 3D Satellite shows satellite imagery without labels.
    • 3D Hybrid shows satellite imagery with place names, roads, and other labels.
  5. Click Update to save the View.
The Maps tab of the View Settings box with "Enable 3D map types" checked and the Map Type dropdown listing 3D Satellite and 3D Hybrid

Now open your View on the front end. With a 3D map type selected, the map opens directly in 3D (you can change this with the Starting View setting below).

Note: You can also keep the regular 2D Satellite or Hybrid map type selected with Enable 3D map types checked. In that case the map opens in 2D as before, and visitors get a 3D button they can click to switch into 3D.

Choose how the map opens #

The Starting View setting appears once you select a 3D map type. It controls the mode the map first loads in:

  • Open in 3D (default): the map loads straight into the 3D view.
  • Open in 2D satellite view: the map loads as a 2D satellite map with a 3D button visitors can click.
  • Open in 2D map view: the map loads as a 2D street map with a 3D button visitors can click.

Opening in 2D is a good choice for Views with many locations. Marker clustering only works in the 2D views, and a 2D map loads faster. Visitors can still switch to 3D whenever they want using the on-map control.

The Starting View and Minimum Zoom for 3D settings shown below the Map Type dropdown with 3D Hybrid selected

Show the 3D button only when zoomed in #

3D imagery is most impressive up close. The Minimum Zoom for 3D setting lets you offer the 3D button only once the map is zoomed in past a level you choose:

  • No Minimum (default): the 3D button is always available.
  • 1 to 18: the button appears only when the map’s zoom level is at or above this number. Higher numbers are zoomed in further. For example, a value of 12 hides the button while visitors look at a whole country and shows it once they zoom in to a city.

If a visitor is in 3D and zooms out past this level, the map returns to the 2D view.

Using the 3D map on the front end #

When 3D is enabled, visitors see these controls on the map:

  • 3D button (top left of the map, in 2D mode): switches the map to the 3D view. A loading indicator shows while the 3D view initializes.
  • 2D button (in 3D mode): returns to the 2D map. The imagery stays consistent across the switch, so leaving 3D Hybrid lands on the 2D Hybrid map, and leaving 3D Satellite lands on the 2D Satellite map.
  • Satellite / Hybrid toggle (in 3D mode): shows or hides labels on the 3D imagery.
  • Full screen button (in 3D mode): expands the 3D map to fill the screen.
A GravityView map in 3D mode over Manhattan with an entry marker and the Hybrid, 2D, and Full screen controls

In 3D, visitors can zoom, pan, and rotate the map with the mouse or touch, just as they can on Google Maps. Clicking a marker opens a popup with the same content as the marker’s info window in 2D, including any links to the single entry. Popups have a close button, and opening one popup closes any other. Searches, including Search as map moves, continue to work while the map is in 3D.

Tips and notes #

  • Marker limit in 3D. To keep the 3D view responsive, the map renders up to 250 markers in the visible area at once, prioritizing the markers currently in view. When more markers are in view than the limit allows, users who can edit View settings see a notice on the map; visitors don’t. If your View has thousands of locations, consider opening in 2D (where clustering is available) and letting visitors zoom in before switching to 3D. Developers can raise or lower the limit with the gk/gravitymaps/maps/3d/marker-cap filter.
  • Falling back to 2D. If 3D can’t load (an unsupported region such as the EEA, an unsupported browser, or an initialization error), the map uses the matching 2D Satellite or Hybrid map instead. Users who can edit View settings see a notice explaining the fallback; visitors just see the 2D map.
  • Camera height over hilly cities. When the map enters 3D, it uses real terrain elevation to place the camera if your Google Maps API key has the Elevation API enabled. Without it, the map enters at a safe city-scale view instead. If 3D looks like it opens too far out over a mountainous city, enable the Elevation API for your key.
  • Custom map styles and clustering. Marker clustering and the Custom Map Styles setting apply to the 2D views only. The 3D view shows Google’s photorealistic imagery as is.
  • Google Maps Platform usage. Google may bill 3D map loads differently from standard 2D map loads. Check the Google Maps Platform pricing page for current terms if you expect heavy traffic.

Troubleshooting #

  • Symptom: The 3D Satellite and 3D Hybrid options don’t appear in the Map Type dropdown.
    Cause: Enable 3D map types isn’t checked, or the Maps Layout is older than 3.8.0.
    Fix: Check the box under 3D Maps in the Maps tab of the View Settings, or update the Maps Layout from GravityKit, then Manage Your Kit.
  • Symptom: The Starting View and Minimum Zoom for 3D settings aren’t visible.
    Cause: They only appear while a 3D map type (3D Satellite or 3D Hybrid) is selected, and require Maps Layout 3.10.0 or later.
    Fix: Select a 3D map type in the Map Type dropdown, or update the Maps Layout.
  • Symptom: The map loads in 2D and there’s no 3D button.
    Cause: The map type is Street or Terrain, which don’t support 3D; the map is zoomed out further than the Minimum Zoom for 3D level; or 3D isn’t available for the visitor’s region or browser.
    Fix: Switch to Satellite, Hybrid, or one of the 3D map types; zoom in past the minimum zoom level; or, if you’re an administrator, check the map for a fallback notice.
  • Symptom: Some markers that show in 2D are missing in 3D.
    Cause: More markers are in view than the 3D marker limit (250 by default) allows.
    Fix: Zoom in so fewer markers are in view, or have a developer adjust the limit with the gk/gravitymaps/maps/3d/marker-cap filter.

For developers #

The Maps Layout provides hooks to customize the 3D view:

  • gk/gravitymaps/maps/3d/options (PHP filter): modify the 3D Maps settings passed to JavaScript, such as the camera tilt and notices.
  • gk/gravitymaps/maps/3d/marker-cap (PHP filter): change the maximum number of 3D markers rendered in the viewport (default 250).
  • gk/gravitymaps/map-services/google-maps/libraries (PHP filter): control which Google Maps JavaScript API libraries are loaded.
  • gk.maps.services.google_maps.maps3d.settings, gk.maps.services.google_maps.maps3d.create_marker_options, and gk.maps.services.google_maps.maps3d.create_pin_options (JavaScript filters): customize the 3D settings, markers, and pins.
  • gk.maps.services.google_maps.maps3d.fallback (JavaScript action): react when the map falls back to 2D.

Related #

Was this page helpful?

Table Of Contents