Maps Pro

Installing Builder Addons

Note: Builder Addons require the Themify Builder. You can use it with either any Themify theme or the Builder plugin.

Installing Builder Addons is exactly the same as installing WordPress plugins.

To install the addon:

  • Firstly, download the addon zip file from the link provided in your Themify Member Area.
    • NOTE: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As" and it will allow you to download as a zip file.
  • Login to your site's admin area.
  • Navigate to WP Admin > Plugins > Add New.
  • Now, click the "Upload Plugin" link.
  • Select "Browse" and navigate to the plugin zip file which you downloaded in the first step and then select the "Install Now" button.
  • This will initiate the plugin installation process, and once finished, you can then activate the plugin.

screenshot

Importing the addon demo layout

Each addon zip file contains a sample Builder data file which you can import to your site. It helps you to understand how the addon demo is created.

To import the addon demo data:

  • First, extract addon zip file to your local computer
  • You should have a folder of the addon. Inside there is a folder named "sample", and inside that folder there is a Builder data file in a zip format (eg. "addon_name_sample-builder-layout.zip").
  • To import the Builder layout, login to admin and then go to the page frontend where you want to import the Builder layout. From the top admin bar > select Themify Builder > Import / Export > Import, upload the sample zip file.

Using the Map Pro Addon

Note: Google limits the number of maps and markers on each page. You only add 9 markers and 5 maps on each page.

Once addon is installed, you will find the Map Pro addon module in the Themify module panel. The module is available in both backend and frontend edit mode (just like all standard modules).

  • In the backend: you can find the Map Pro module in the Themify Custom Panel.
  • On the frontend: you can see the modules after turning on the Builder from top admin bar > Themify Builder > Turn On Builder.

screenshot

  • Drag and drop a Map Pro module in a row
  • Map Pro Options
    • 1) Module Title = Insert the module title that will appear at the top of the module. It will appear left-aligned, in H3 format.
    • 2) Map Dimension = Adjust the width and height of the maps as you like.
    • 3) Type = Choose from 4 different types of maps (Road Map, Satellite, Hybrid, Terrain)
    • 4) Style = Choose from over 40 styles to customize the look of your map.
    • 5) Scrollwheel = Enable or disable the ability for users to be able to zoom and out of your map by scrolling either up or down.
    • 6) Draggable = Enable, disable, or enable only with desktops the ability to allow users to drag your map by clicking on it.
    • 7) Disable Map Controls = This allows you to enable or disable the map controls that appear on the left side of the map.

    map-pro

    • 8) Base Map Address = Input the area where you want your map to focus on (i.e. Toronto).
    • 9) Zoom = Choose how you much you want to zoom in the map, as it initially loads and appears on your site.
    • 10) This box give you a live preview on how your map will appear once you add the marker, choose the type, style, and zoom level.
    • 11) Marker options:
      • Add any address you would like the marker to appear
      • Tooltip text = add any text you would like to appear when the marker is clicked.
      • Icon = Insert your own custom icon/image
    • 12) Add Location Marker = Click to add another marker for your map.
  • map-pro

Styling Map Pro

  • 1) Click the Styling tab to start customizing the Map Pro module. Anything customization done in the styling panel will affect the entire module.
  • 2) Effects = Choose an animation that'll show how the module will appear.
  • 3) Background Color = Use the colour picker to pick a color for your background.
  • 4) Padding = Choose the space within the module.
  • pointer

  • 5) Margin = Choose the space outside the module
  • 6) Border = Choose the colour, size, and style for each side of the border.
  • 7) Additional CSS Class = Add additional CSS class for custom styling.

pointer

Father's Day Sale: Get up to 30% off code: SUPERDAD & $100 off Lifetime Club with code: DAD4LIFE