CONTENTS:
Edit marker category, dropdown and tab selectors
- Marker category dropdown & tabs
Add a get directions button to your map marker infoboxes
Edit your map style
The Map Settings tab contains the basic settings for your map.
- Map Type
Use the dropdown to switch between the different map types available in Google Maps: Roadmap, Satellite, Hybrid and Terrain.
- Map Theme
Use the dropdown to switch between different map color schemes.
- Auto Fit
When switched on (default setting) this option will automatically scale your map in order to display all markers added. When switched off, you can manually adjust your map to your desired location and zoom, and click on the Get Map Centre and Zoom button.
This will then become the default loading setup for your map.
- Mouse wheel zoom
This setting allows you to enable or disable the ability to zoom in and out of our map using your mouse’s scroll wheel. This option is off by default.
- Mobile pan lock
In situations where mobile users are faced with a map that fills the entire screen, enabling this feature will allow them to scroll down the page past the map to any information or content placed below the map on the page.
- Front end search
Add a search box to your map
Edit marker category and dropdown selectors
- Marker category dropdown and tabs
If you have set up Marker Categories, this option will provide you with two options that allow user control for how the various marker categories are displayed on your map. These two options are:
- Marker Category Dropdown
- Marker Category Tabs
These two options are mutually exclusive – enabling one option will disable the other one. Also note that if you make use of Category Selection, all of your markers have to belong to a named category, ie. not uncategorized. Uncategorized markers will not be displayed on the map.
- Dropdown selector
Default ‘Show All Markers’ Copy
The category selector will include your categories created and one “Show All” selection. The text for the “Show All” can be edited here to a phrase of your choosing.
Default Category
This setting will contain the default category that displays when your map loads.
Default Selector Position
Choose where you would like your selector to appear, relative to your map. Available choices are Top Left or Right, and Bottom Left or Right.
Dropdown selector styling
Applying styles to your selector is accomplished using the settings below the Output Selector Example. As you update your settings, the Example will update to reflect your changes.
Font color – Sets the color of the font in the selection box
Fill color – sets the color of the selection box background
Border weight – adjusts the width of the selection box border (in px)
Border radius – adjusts the curvature of the selection box corners
Vertical padding – adjusts the interior vertical padding of the selection box
Horizontal padding – adjusts the interior horizontal padding of the selection box
It is possible to achieve additional styling by adding a Category Selector CSS class on the Developer page.
- Marker tab selector
Since the dropdown selector gives users an all-or-single-category approach to displaying markers on a map, the alternative is to use the category tabs, which acts as a filter. In effect, users of a map can then select one – or multiple categories – when viewing a map. As with the Dropdown selected, all your markers MUST belong to a named category or they will not be displayed.
Options to style the appearance of your category filter buttons can be found below the preview area – and you can also specify which markers will be active by default when the map loads by setting the buttons as Active in the preview panel. In the example above, markers that are in category Group 1 will appear when the map loads, while Group 2 markers will not.
It is possible to select multiple categories to be active when the map loads.
Add a get directions button to your map marker infoboxes
Switching this option on will allow a ‘Get Directions’ button to appear in your marker info boxes. When tapping on this button, a separate tab will open in their browser with the Google Maps interface loaded and providing directions. On mobile, users will have the option of opening either a browser or the Google Maps app.
