1. The 3.8 code for Fabrik is now available on github, in the 'master' branch. If you are familiar with updating Fabrik from github, we would appreciate it if you could test this code on J! 3.8 for us. Once we have some feedback, we'll build a 3.8 release.

Google Map element

Sep 18, 2017 at 7:44 PM
Google Map element
  • The Google Map element allows you to show a Google Map appropriate for the record e.g. to show a customer's address on a map.

    NOTE: As of June 2016, Google require an API key to use google maps, which you can obtain (free) from Google, see https://developers.google.com/maps/documentation/javascript/get-api-key#key. Once you have your key, enter it in the Fabrik global options, see http://fabrikar.com/forums/index.php?wiki/options/.
    Google Static Maps API + Google Maps JavaScript API must enabled.
    If you want to use geocode you must also enable Google Maps Geocoding API.

    NOTE that certain advanced features, like geocoding and radius widgets, currently will not work if the map is in a repeated group. We are gradually working on making all of the map element features "repeat friendly", but you should test any specific features your app may rely on before committing to your app design.

    Form Examples (top)

    A Simple Example (top)


    A More Complex Example (top)


    Settings (top)

    Main Options (top)

    • Map type-
      • Normal - shows the map with roads
      • Satellite - show a satellite image
      • Hybrid - shows the roads overlayed on top of the satellite image
    • Start zoom level - default zoom level when adding a new record
    • Map width - the map width in pixel. Leave blank to produce a 100% width map
    • Map height - the map height in pixels
    • Style - Determines optional styling that can be applied to the map e.g.


      will give you a map styled as:


      Google provides a Google Map style generator which may help you in setting up the style properties.
    • Control - the control allows you to navigate/zoom in and out of the map and is placed on the top left hand side of the map
      • None - Don't show the control
      • Large map control - Show the full control, allowing you to zoom in and out with a scroll bar and to navigate around the map with left/right/up/down buttons - this is the option used in the above complex example image
    • Scale control - Show a indicator of the current map scale in the bottom left hand corner of the map
    • Map Type control - Show a control in the top right hand corner allowing the user to change the map type (see above for the may type descriptions)
    • Overview control - Shows a zoomed out view of the map in the bottom right hand square of the map, which allows you to scroll the main map
    • Use static map- if the map is in a detailed view, then this option determines how to render the map.
      • Static - Use the standard Google Map static map (a map image served by Google including the marker)
      • Full - The normal Google map is shown, but the marker can not be moved.
    • Mouse scrolling - If set to yes, then moving the mouse over the map and using its scroll wheel will scroll the map in/out.
    • Show Decimal lat/lng fields - If set to yes show the markers lat/lng location in two fields underneath the map.
    • Show DMS lat/lng fields - If set to yes show the markers lat/lng fields containing the degrees minutes seconds.

    Default Location (top)

    • Default location - Determines how the default location is defined
      • Coordinates - Uses the coordinates define in thedefault lat and default lon fields
      • Users location - Asks the user if they want to use their current location
    • Default lat - default latitude when adding a new record.
    • Default lon - default longitude when adding a new record

    Geocoding (top)

    Geocoding is the process of looking up a lat/lng location from a given address.
    • Enable geocoding
      • No - Disable this feature
      • Yes - Enable this feature, a field will be placed above the map. The address typed in here will be used as the geocode address.
      • Use Elements - Geocoding will be turned on but will use the data entered in the elements selected below to geocode the address.
    • Address 1 ... Country - Select the elements you want to use to geocode the address from. Used when enable geocoding = use elements.
    • Trigger geocode with-
      • Button - Adds a button above the map, labelled 'Geocode', pressing this will trigger the geocode lookup
      • As you type - An ajax request is sent to trigger the geocode lookup each time text in one of the geocode fields is changed.

    Radius Widget (top)

    • Radius Widget Add draggable Radius Widget to pin
    • Unit Miles or Km
    • Write Radius To - select an element to store the radius value
    • Read radius from - lement to watch and update the Radius Widget from when changed. Can be the same as Write Radius To element.
    • Default radius - If not using read or write elements, default distance for Radius Widget. If using elements, Read element value will be used in preference to Write element value.
    • Fit Map - Zoom the map to fit the radius, overrides specified zoom level
    An example of the radius widget on a styled google map:

    List Settings (top)

    • Use static map -
      • Yes - A Google static map image will be shown, indicating the marker location
      • No - The raw coordinates will be shown
    • Raw value type - If use static map is no then show the location as decimal value or as degrees minutes and seconds.
    • Map width- the static map width in pixels
    • Map height the static map height in pixels
    • Start zoom level - static map's zoom level

    Tabs and Popups (top)

    In certain circumstances, for instance when using tabbed or popup layouts, the map will not display correctly if it was not visible when the page was loaded. This is a known issue with Google maps, and not really a Fabrik "bug".
    For Fabrik's built in popup and tabbed displays, this is handled automatically. But if you are using your own custom ways of putting the form in a popup or a tab, and it isn't visible on the page when the page is first loaded, you will have to handle redrawing the map when it is displayed.
    Here is an example of doing this for the UIKit framework, which fires an event (uk.modal.show) when it opens a modal dialog. So we need to hang some event handling code on that. In this case, we are using jQuery code to do it.
    Code (Text):

        'uk.modal.show': function(){
            fconsole("Modal opened");
    In this case, the #your_uk_modal_div is the ID of the container which has the uk-modal class, in which your modal content (incuding the Fabrik form) is located. You would simply replace that ID with your div's ID, replace 123 in the form_123 with your form's numeric ID, and yourtable___yourmap with the full element name of your map element. The fconsole() line is just for debugging purposes, so you can see in a debug console when the event fires, you can delete that once the code is working.
    Most tabbing and modal plugins or frameworks provide this feature, of firing an event or a callback function when the tab is selected or the modal is opened. It's just a case of working out how to utilize them, and run that one line of code that runs the redraw() on the map.