Table of Contents
Welcome to MapifyPro Documentation! Below you'll find an in depth overview of every single feature of Mapifypro. We have organized this in the order we suggest setting up your maps and adding locations. Feel free to click any link below to navigate to the exact section you need:
1. General Overview
After successfully installing MapifyPro, you’ll notice that a new section has been added to your Apps panel, titled ‘MapifyPro’. On clicking through, you'll be greeted by the home page, and helpful tips on what is contained in each section. Below is a brief overview of what you'll find, though we will cover each section in detail throughout this documentation.
Maps: Start here! This is where you'll manage and create maps, toggle settings, etc. After you've updated all settings to your liking, click "Save Map". A script is added to the bottom of this page, which is used to place the map into any html field. This is covered in detail in section 6 of this documentation.
Locations: All of your map locations will be stored here, and can be created/edited as needed.
Location Tags: These are used to create available "tags" which can be assigned to locations in order to filter them on the front end map. These allow your visitors to sort/filter locations buy any topic you like.
Batch Upload: This is where you can upload a collection of locations to a map via the provided .csv file. This saves time and allows you to upload the locations and each of their unique settings in one action.
*You may also want to check out our Quick Start Video to see our suggested workflow! It is a great supplement to this more detailed documentation.Back to Top
Creating a library of maps with MapifyPro is very simple, but also contains a lot of features. This section goes in depth to explain every single feature included with MapifyPro, how it works, and how creating a map integrates into the overall workflow. Though it seems like a lot at first, after the quick learning curve you'll find that it's very simple to get your map published in minutes.
Map Listing/Library: This is the first screen you'll see. At first it will be empty and you'll need to create a new map by entering a title under "Add New Map", but eventually you will have an overview of maps similar to the one found below. After creating a map title you will simply click on that title to edit the map settings:
To start, enter a title under the "Add New Map", then click "Add". This will make the map available, so simply click on the title of your new map to get started! After doing so, you'll be taken to that map's settings, which we'll outline next:
This section will contain all basic items to setup your map, as outlined below:
a. Title: Name your map here. This title will not display on your front-end map, so you may title it anything for reference.
b. Mode: This is where you select standard maps, or custom image mode. These will be explained in detail later in the documentation.
c. Default Pin Image: This is the small graphic you'll want to use as the default pinpoint/marker for each location. You can add a different pinpoint graphic to each location, but if they are not specified in the Location Settings, then this is the graphic that will display instead. We suggest using the graphic that will be seen for most of your locations to save time down the line.
d. Enable Mouse Zoom: This enables zoom via mouse scrolling. Note that this can be annoying on mobile devices or fullscreen maps as it can cause the user to get "stuck" in the map when trying to scroll. In these cases we suggest turning this off.
e. Enable Manual Zoom: This adds the +/- icons for manual zooming on the map via clicking. It's useful in all cases, but especially useful if you disable Mouse Zoom as it provides a more direct way to zoom in and out of the maps.
f. Enable Clustering: With clusters, multiple nearby locations will be grouped into single icons that, when clicked, will zoom in and expand to show the locations within. This is very useful for when many locations are close together. This feature is dynamic based on the zoom level. They'll look like this:
g. Enable "Use My Location": This is a new feature for version 3.0 and above. When clicked, it will show the user's current location. Note that this is dependent on the user allowing location services to be enabled, and also that your site is secure. Insecure sites (i.e. http://) will not work as this is a browser-enabled security feature. This is the setting as shown on the front end map:
h. Pop-up Text / Labels
This area let's you change the text that appears in the pop-up after a location is clicked. This is how it looks by default on the front end map, but you can change them to any text as you like:
LOCATION TAGS: These are the available "tags" created in the Location Tags setting of the MapifyPro App main menu. This is covered in detail later, but ion this section you want to select the filter tags you'd like to include on this specific map by selecting them on this list. This list will be empty until you create your tags in the Location Tags section of the app.
SEARCH AND FILTER SETTINGS: All settings related to filter details, and search options are contained in this section. We will outline them for you beneath the following image.
a. Enable Search: Hide or show the search area on your map to allow searching by city or zip/postal codes
b. Enable Filter Dropdown: Enable a dropdown that allows users to select filters that you've assigned to the map. When the user selects a filter, only those locations tagged with that filter will show. This is how it looks on the front end map:
c. Enable Filter List: This has the same functionality as the filter dropdown, but adds the list beneath the map, similar to a map legend. You can assign a graphic to each filter when displayed this way as well. This is how it looks on the front end map:
d. Center Map on Search Results: When enabled, the map will center on the location(s) that appear after a user enters a search. This is very useful for mobile users and we suggest turning this on.
e: Center Map on Filters: Same as above, but when selecting filters.
f. Text / Labels: This section lets you change the text/labels that appear on the front end maps in regards to filters and the search area.
SEARCH RADIUS SETTINGS: This section contains settings related specifically to the search radius feature. This allows you to specify the granular settings of how far you want users to search, as well as specified countries. More details are included after the following image.
a. Search Radius: This is the default search radius in miles or kilometers. This is only important if you don't enable specific search radius variables on the front end map (more on that below).
b. Search Radius Unit: Specify whether you'd like to use miles or kilometers. This will change the functionality of the maps in order to search in the correct unit distance, and also the labels used (miles or kilometers).
c. Search Region Bias: If you have locations in a single country, we suggest entering the country code here (i.e. UK, US, CA). This will provide more consistent search results in your specific country. You can click on the link provided there for a list of country codes.
d. Enable Front-End Search Radius: This setting allows the front-end user to specify the distance in which they'd like to search on the Mao when using the search feature. If this is not enabled, the distance will default to what you specify in the "Search Radius" setting mentioned above. If enabled, it will apply default values, but you can specify these below.
e. Front-End Search Radius Options: This is where you can specify the different search distances that users can select on the front-end. For example, you ay want to add 5 miles, 25 miles, 100 miles, 500 miles. You will add these here under each option, and it will allow your users to select those distances on the map when searching. If left blank, MapifyPro will assign default values. Here is an example of how it will appear on the map:
TOOLTIP MARKER/PINPOINT SETTINGS: All settings in regards to your tooltips and pinpoint/markers are located here. Full details are found below this reference image:
a. Animated Tooltips? When enabled, tooltips will fade in with a subtle animation. When disabled, they will instantly appear/hide with no effect applied.
b. Tooltips Orientation: With MapifyPro 3.0 and above, you can now add a featured image to each tooltip (these images are applied in the location settings). however here you can specify whether the image will appear above the text or to the left. It also changes the general orientation of the tooltip design. Here are examples of each:
Top Orientation Tooltip with featured image:
c. Animated Pinpoints? This setting allows you to specify if you'd like to enable the subtle tooltip animation. When enabled, the pinpoints will appear to fall onto the map with a subtle bounce effect.
INTERACTIVE LIST OF LOCATIONS SETTINGS:
This feature relates to a fully interactive list that can be placed beneath the map. This list contains information on the location, and buttons to further interact by getting directions, or opening the "More Details" pop-up. On click, the list item will expand to show these details, as well as highlight the location on the actual map. We will describe each feature below, but here is an example of the list on the front-end map:
a. Enable: Select Yes or No to enable/disable this feature
b. Number of Locations in List: This will specify the number of items to appear on the list before pagination occurs. For example if you set this to 5, but have 25 total entries, the user will see the first five, then will need to click next to see more.
c. Hide List By Default: This will hide the list the the map is first loaded, or when "Default View" is clicked. When a user performs a search or selects a filter, the list will then display beneath the map with only the appropriate locations showing. For example, if I search "New York" then locations will appear in the list beneath the map, as well as showing the locations on the map itself. Further, locations are listed from closest to farthest, based on the user's search.
d. Text / Labels: Use these to specify the text you'd like to appear on the 2 buttons that appear in the interactive list. By default, they will read "More Details" for the popup button, and "Get Directions" for the button that provides directions to this location.
COLOR / DESIGN SETTINGS:
Use these settings to edit the overall style of all MapifyPro elements. All details are outlined beneath the following reference image:
a. Map Background: This is the background that appears behind the image you use in image mode. it only applies to Image Mode, and only if you're using a transparent PNG file.
b. Tooltip Background: This is the color of the tooltip.
c. Tooltip Transparency: Adjust the transparency of the tooltip.
d. Tooltip Text Color: Change the font color of the tooltip text. This is useful if you want a darker tooltip and lighter text color, or vice versa.
e. Popup Background Color: This is the color of the location popup's background (default white).
f. Popup Header: This is relative to the blog article format, which has a colored bar at the top. Use this setting to change that color. Not needed for normal location popups.
g. Popup Date Background: This is relative to the blog article format, which has a colored date indicator at the top to indicate when the blog post was published. Use this setting to change that color. Not needed for normal location popups.
h. Popup Accent: This is the color of the "Get Directions" button and other minor accent colors that appear in the location popup.
MAP/IMAGE MODE SETTINGS: This section pertains to specifics related to the mode you have chosen for your map.
a. Map Mode Settings > Style: This let's you choose a unique style for the map. We have multiple options built in that let you achieve different styles, like black and white, pastel, and other creative options. Simply select a style and you'll see the map preview at the bottom of the page change to reflect the new style. This relates to Map Mode only.
b. Image Mode > Custom Map Image: When usingimage mode, this is where you'll upload your image to be used as the map or Interactive Product Feature. This works by uploading the image to our server, where it is rendered into tiles, then sent back to you. After this process, the map will then behave much like standard maps, complete with zoom affects and more. Note that after you select the file to upload, you must click "Update" at the top in order to start the rendering process. It typically take about 2 minutes. We suggest using an image around 2500 pixels wide at minimum. Larger file sizes will naturally take longer, but you'll see a progress bar that indicates status (under the "Status" section). Once complete, you will see a message that indicates as such.
DEFAULT ZOOM LEVEL AND LOCATION SETTINGS: In this final section, you'll specify the details on how you'd like your map to appear on first view when a user visits your map on the front end. Details are outlined below this image:
a. Main Location: This is the location where you'd like you map to center upon by default. You will find 2 options here: Manual Center and zoom: Allows you to simply click on the map to specify the center location. Existing Location: This let's you center upon one of the locations you've created in your Map Location library.
b. Initial Zoom and Style Preview: This preview map has a few benefits: It allows you to specify the zoom level (which will carry over to the front-end map), it let's you preview the style you chose from the style settings (or the image if using Image Mode), and also let's you preview the center location of the map. If you've selected "Manual Center and Zoom" you will also be able to double click in order to center the map's default location.
EMBED CODE: This section generates a code that can be placed into any html field throughout your site. You can specify the height and width of the map itself, and the code will then be generated beneath. Simply copy that code, then paste it in a text field of a page. For example when making a new page, you'll switch to the HTML formatting of the text field, and paste the code there. This will then display the map on that specific page.
a. Save Map: When updating or creating a new map, be sure to click this button to apply changes. You will see a "Settings Updated Successfully" message once the save is complete. This button appears at the top and bottom of the Map Settings pages and will look as follows:
Back to Top
3. Map Location Settings
Assuming you’ve created at least one map, it’s now time to start adding locations! Below you will see an overview of what to expect when you click on the ‘Locations’ sub-section of MapifyPro.
Similar to adding a map, you’ll want to enter a new location title and click the “Add” button on this screen to add a new location to your map(s). Or, if you have locations already, you can click on them to change the settings. The next section will outline each feature available while adding a new location, how it works, etc. Here’s an overview of how it will look after you've added a number of locations:
When clicking on the new location, or an existing location, here is a complete list of what you’ll find on the location settings page (descriptions follow the photos):
TITLE: You can title your location here. It will appear at the top of the tooltip, as well as the pop-up gallery, if you’ve enabled a pop-up.
DESCRIPTION: Similar to a blog post, you may enter text and other html-based items here (such as images). Items entered here will appear on the text area of the front-end map gallery popup, to the right of the video/photo gallery.
Scrolling down, you'll find more settings, as outlined below (more details follow the screenshot):
Enable Pop-up: Display or hide the gallery pop-up for this specific location. Set this to No if you don’t want a pop-up to appear after the visitor clicks on the map marker.
Take visitor to another page on clicking location? Allows this location to link to another page/site on click. Use this to take visitors directly to another page rather than showing the pop-up.
Enter URL: If using the option above, this is the url where the visitor will be taken upon clicking on a map location.
Open In New Window/Tab: Allows you to specify if the link should open in a new window or tab.
Enable Tooltip: Display or hide the tooltip for this specific location. The tooltip is the small amount of info that appears when a visitor hovers over a map location.
Close Tooltip: This setting controls the behavior of the tooltip.
Automatically: This will cause the tooltip to automatically hide when the user hovers off the location. Manually: Good if you want to add links to the tooltip.
Include Location Information: Toggle whether to include address, phone number, and other details on the pop-up gallery.
Include Directions: Specifies whether to include the Directions button in the pop-up, as shown above. Set to ‘No’ if you prefer to hide this button. You can refer to the image above to see an example of the directions button.
Tooltip: This text field allows you to add content to the tooltip, which appears when a visitor hovers over a location on the map. Note that you can use basic html here as well. Furthermore, you can add a "directions" shortcode as shown to automatically add a directions button in the tooltip. This will be organized below the location title, as shown below (note that you can change the orientation of the tooltip image in the map settings. Tooltip image is added to the "Featured Image" section in the right sidebar):
Include on Selected Map(s) Location List? Specify if this location should be included on a map’s Interactive Location List, which appears beneath the map.
Short Description: On the Interactive Location List (shown in the image above), when a location is clicked it will expand to show more details, and a snippet of text. Here's an example of the front-end version. It is the text beginning with "Each location can have...":
Pin Image: This allows you to upload a unique map marker/icon for this location. It will overwrite the default pin image you set on the map settings. Leave it blank if you’d prefer to use the default image you assigned while creating your map(s). Upon uploading, you will see a preview of the marker.
MAPS: This section contains all of the maps you’ve created thus far. You can add the location to any map you like in a single click, which comes in handy if you want to add the same location (with the exact same settings) to more than one map. To include the location on any map, simply select it as shown below. You can also hold command (apple) or control (pc) to select multiple maps.
LOCATION TAGS / FILTERS: This is where you will assign a "tag" for this specific location. See below screenshot for more details.
Location Tags: ‘Tags’ in the case of MapifyPro, almost always applies to filters. As outlined in the last step of the MAP SETTINGS section above, these filters are added to the map in order to allow visitors to click on them from the drop down menu or filter list (see previous section ‘Maps’ for more details). You should have already added the filters while creating the map, which will make them available here to “tag” the location. This means when a specific filter is clicked, this location will be included in the results on the map, while others will be hidden.
GALLERY SETTINGS: This section is referenced in the following screenshot, and described in detail afterwards:
Video Embed Code: Each location can have a single video either from Vimeo or YouTube. Use Vimeo or YouTube iframe video embed codes to include a video in your location’s pop-up gallery. If left blank, the gallery will revert to an image gallery only (if adding images). If no images or video are added, then the pop-up will dynamically adjust to only display text.
Gallery Images: This section allows you to add as many images to the pop-up gallery as you like. Even better, it allows you to add them all in a single action. Simply click “Add New” and you can either select them from you media gallery, or upload them. MapifyPro will automatically generate the gallery, thumbnails, and image sizes for the pop-up. Note that you can have any combination of images, video, and text, and the pop-up will dynamically adjust to accommodate with a proper style and layout. For example, if you only upload a video and images, but no text in the description area, the popup will adapt to only show the gallery, and hide the text area. Don't have a gallery? It will adapt to only show text.
Note to use use the pop-ups as a gallery only, meaning images without the text, you’ll just leave the main info area at the top of this page blank, and MapifyPro will automatically adapt to display like a common gallery pop-up.
FIND ADDRESS: This is where you'll plot the location on your map. Find out more below:
Find Address / Map: This is where you plot the location on the map, whether by entering an address (and hitting enter/return key) or simply double clicking on the map itself. Alternatively you can drag and drop the location on the map to fine tune the placement. When using custom image mode, a preview of the image used in your map settings will appear here so you can see where to place your location (since images obviously don’t support addresses).
Note: The zoom level of your map is set in the map settings. Though you can zoo into this map, it will not effect zoom level of the map on the front-end.
ADDRESS DETAILS: This area pertains to the "More Details" dropdown that appears on the front-end map. It does NOT effect placement of your location, but simply let's you enter the location's address and other details into the popup so users can get more data on this specific location. Find out more below.
Phone, Address, City, State, Zip, Country, Links: All of these settings are what appear in the “Location Information” section of the pop-up gallery. In addition to common details, you can also include external links, such as yelp reviews, author links, etc.
Links: You can also add links to your location, such as links to Yelp reviews, links to other pages on your site, and so on. Simply click "Add", then enter the URL and the title of the link as you'd like it to appear in the front-end popup for this location.
SHARE SERVICES: Each location can be shared on social media, and will drive traffic to your map. Find out more below the following reference screenshot:
Share Services: Specify which social media options you’d like to include on the pop-up gallery, which encourages viral marketing and sharing to help spread the word and gain traffic to both your site AND physical store locations. You can select the exact social media services that you'd like to enable sharing for (and the ability for users to send the location via email), and a corresponding icon will be added to the popup as shown here:
a. Save Location: When updating or creating a new location, be sure to click this button to apply changes. You will see a "Settings Updated Successfully" message once the save is complete. This button appears at the top and bottom of the Location Settings pages and will look as follows:
Back to Top
4. Location Tags
In this section you will create all of the "Tags" you'd like to use throughout all of your maps. These Tags are actually filters, and can be assigned to both the map (so they appear on the list of filters available) and to each location (to specify that the location should appear when a specific filter is selected).
Here is an overview of what you’ll see:
Just like the other sections, you'll eventually have a collection of tags, but to start you will need to create them by filling in the "Add New Location Tag" section and clicking "Add". After creating a tag, it is all set to go, but you can also select it to refine the details. On clicking, you will see the following page:
This page allows you to change the title of the tag, and also add a description for your own reference. Note the description will not be visible to site visitors and is only for reference.
After saving, you're all set! The icon used for that location will be placed next to the filter itself in the list. You now have a custom icon on the filter, which will appear as shown below on your filter list:
5. Batch Upload
You possibly have a lot of locations to upload, and MapifyPro includes a lot of features for each location. So, we’ve devised a method of batch uploading your locations in a single upload. This feature supports the uploading of a .csv spreadsheet, which we provide in the proper format. This spreadsheet allows you to specify the setting of each core feature for every location you have. It can be a touch tricky, so we recommend starting with 5-10 locations until you get comfortable with the formatting, but once you get the hang of it, you’ll cut back your workload significantly.
We provide a free .csv demo file to get you started, and note that you must use this file and ensure that all details are entered properly for the bulk uploader to work as expected. You can download your .csv demo file by clicking the "Download Sample CSV" link, as shown in the screenshot below.
Futhermore, the method used by MapifyPro’s batch upload feature treats your .csv file as a database. So, making changes to any item within the .csv will ONLY change that setting in the location, while ignoring the items that haven’t changed. This allows you to maintain a separate database of locations (your spreadsheet) and update as needed without creating duplicate locations once you upload it. See below for an overview of what you’ll see:
On this screen you will:
1. Select the map you'd like to add all locations to in the dropdown menu.
2. Upload the completed .csv file that includes all settings properly formatted.
3. Click "Import" button at the top of the page to begin the import process.
Afterward, all locations will be added to the map you've selected!
Note: You must enter the address in the "Location Address or GPS Coordinates" field for this to work. This field controls where the location is plotted, and is mandatory. The other address fields are for the "More Details" section of the popup and do NOT affect the placement of the location. If you receive the "Location cannot be found" error, this is most likely the culprit.Back to Top
6. Bringing it Together: How to Place Maps Throughout Your Site
Now that you're familiar with every element of MapifyPro, it's simple to place any of your maps throughout your site. Below we outline the process of placing a map into your site, but you can also check out our Quick Start Video, which covers the same steps in a more visual workflow.
-With MapifyPro you can create an unlimited amount of maps, and they are stored in an organized library as outlined above. You can select any of your maps to access the script code you'll need to place the map on your site's page or pages.
-Each map you create generate a script. A script is a small snippet of code that tells your site to display a specific map at a specific size.
-To place your map on your site, you'll need to copy this script. It is located at the very bottom of the Map settings screen, and will look like this:
Notice the you can specify the size of the map as it will appear in your page via the height and width parameters. However, this will not override your theme settings.
-After copying that script, you'll navigate to the page you'd like to place the map (Online Store > Pages), or you can create an all new page to display your map, which we recommend.
-The script must be placed in an HTML field. When you create a new page, simply click the HTML icon to find the field where the map needs to be place, as shown below. Note that we also show the placed script as it will appear in this field:
-Click the purple Save button at the bottom right to save your page, and that's it! Your map will now be displayed on the front end version of this page. Repeat this step if needed to pace your unique maps on any page or theme element that contains the HTML editor field.Back to Top
7. Uninstalling MapifyPro
If you wish to uninstall MapifyPro, please follow these steps:
1. Click the small Trash icon next to the MapifyPro map on your Apps screen:
2. You'll then see a confirmation screen where you can leave us feedback (optional). Click "Uninstall:" to complete the uninstallation process. This will fully remove your copy of MapifyPro and will also cease your payment schedule.
3. Important: To fully remove all traces of MapifyPro, you'll also want to remove the map scripts you added to display each map throughout your site. To do so you'll simply navigate to the page where you placed the script, and delete it. With MapifyPro installed, these scripts are used to display a specific map. If you do not remove these snippets, you will see an error on these pages on the front end of the site. It will look something like this:
Back to Top
8. Useful Links and Support Forum
News and Updates: Latest news, video tutorials, case studies, and freebies: Visit the MapifyPro Blog
Facebook: Get the latest promo codes and more by liking us on Facebook
Twitter: This is the easiest way to receive up to date news and updates on the nitty gritty details of apifypro, such as releases, what we're working on, and more. Follow us here on Twitter
MapifyPro comes with extensive support and a details FAQ that covers common issues. If you’re still having trouble after reading this documentations, feel free to visit our knowledge base and support system here:
This guide, and all content, is © Copyright 2018 PaperTelevision LLC.Back to Top