Google Maps integration demo

Z

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…

NameTypeAddressDistance
NameTypeAddressDistance

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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *