Google Maps integration demo

Demonstrated features

Google Maps integration
responsive table
premium styling



Required skills

beginner



Required license

premium

Synchronizing data tables and maps

To synchronize a data table and a map, geolocation needs to be configured for the database table. Read more…

Name	Type	Address	Distance
Name	Type	Address	Distance

Markers can be clicked on the list as well as the map. Searches within the data table are immediately synchronized on the map. Ranges can be changed interactively. Supporting multiple types of filters like global search, Search Builder, Search Panes and individual column search.

Demo data

Data used for this Sydney Harbour Bridge demo is taken from the Google Maps Platform. An SQL script to create the table and test data can be downloaded here. Start the Data Explorer to execute the script file, click “Import data/Execute script(s)“, select the ZIP (no need to unpack) and follow the instructions. Follow these instructions to create a map from your markers test table.

Advanced options used to add geolocation support to this data table:

{
    "lengthMenu": [ 3, 6, 9 ],
    "pageLength": 3,
    "stateSave": false,
    "wpda_geo": {
        "show_map": true,
        "map_init": "open",
        "map_location": "fixed",
        "show_filter": true,
        "geo_filter": "before",
        "geo_marker_column": 1,
        "geo_marker_position": "after"
    }
}

Available options

wpda_geo Adds geolocations support to a data table (geolocation must be enabled first)
wpda_geo > show_map Set to false to hide map (map shown for any other value and if option is missing)
wpda_geo > map_init Set to open to show map on startup (user needs to click globe icon on any other value and if options is missing)
wpda_geo > map_location Possible values: fixed (use fixed location), user (use user location) and plugin (use configuration settings)
wpda_geo > show_filter Allow user to change range (true | false)
wpda_geo > geo_filter Possible values: before | after (location geofilter against table search filter)
wpda_geo > geo_marker_column Column index where to add marker
wpda_geo > geo_marker_position Possible values: before | after (position of marker against column values)

Notes

Places are ordered by distance (closest first)
The current version does not support additional sorting
Use globe icon to show/hide map
This is a responsive solution and works on any device