Map Builder

The Map Builder offers various options to further customize your map apps.

Setup #

• Map Width / Map Height – Set a size for your map app.
• Initial Style – Choose from available Google Map styles.
  • Map – displays the default road map view. This is the default map type.
  • Satellite – displays Google Earth satellite images.
  • Hybrid – displays a mixture of normal and satellite views.
  • Terrain – displays a physical map based on terrain information.
• Initial Zoom – The default zoom is set to 10.
• Gesture Handling – Users might accidentally zoom your map while scrolling the page. This option lets you manage this behavior.
  • Greedy – Your map reacts to all touch gestures and scroll events
  • Cooperative – Allows the user to scroll the page normally, without zooming or panning the map. Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.
  • Auto – Follows the same behavior as the preceding map.
  • None – Disables gestures on your map.
• Google Maps Buttons – Toggles the Map/Satellite buttons on the top left corner.

Initial Location #

• Use user location – this will require user permission from their browsers
• Use static location – toggles latitude and longitude fields for coordinates
  • Add marker for static location – when enabled, additional marker options will be available.

User Interaction #

• Enable Advanced Marker Interaction – shows settings to style markers on hover
  • Marker Size
  • Marker Colors
• Enable Radius Search – shows settings for radius search

Marker Layout #

• Marker Title – Displayed when the user hovers over the marker (HTML not supported). Use the {:columnName} format to display column values.
• Popup Header – allows you to customize the content that appears as the header of the popup window when a user clicks on a marker. You can use HTML to format the text and include dynamic data associated with the marker. Use the {:columnName} format to display column values.
  • Example: <h1>Restaurant Name: {:name}</h1>
• Popup Content – Additional body content to show when a marker is clicked. Supports HTML and column values.
• Marker Size – slider control to adjust the visual size of the marker on the map.
• Marker Colors
  • Background Color – Sets the primary color of the marker’s background.
  • Border Color – Sets the color of the border around the marker.
  • Glyph Color – Sets the color of the icon or symbol (glyph) displayed within the marker.
• Custom Glyph – HTML supported. You can use icon fonts such as Fontawesome.
  • Example: <i class="fa fa-pizza-slice fa-lg" style="font-size: 20px;"></i>

Default Where #

• Accepts valid SQL only. Click on show examples link below the field for more usage examples.