MapifyLite Tutorial

by Lyn Sy on October 20th, 2023 under Tutorials

We put together detailed a MapifyLite tutorial to guide you in creating a map on a WordPress website for Free!

If you haven’t downloaded MapifyLite yet, grab it NOW! It’s free and pretty darn cool!

How to Install MapifyLite WordPress Map Plugin

How to Install MapifyPro WordPress Map Plugin

Here’s how to Install MapifyLite on your WordPress site

  1. After you download the MapifyLite plugin file from mapifypro.com, log in to your WordPress admin account.
  2. Go to the Plugins tab in your WordPress admin.
  3. Under the ‘Plugins’ tab, click “Add New’.
  4. Then, click ‘Upload Plugin’
  5. Click the ‘browse’ button and locate the mapifylite-master.zip file that you downloaded to your computer.
  6. After the plugin uploads, select the ‘Activate Plugin’ option.

That’s it! You’ve successfully installed MapifyLite.

Now, you’re ready to create your own custom map.

What You’ll See after Installing MapifyLite

After successfully installing MapifyLite, you’ll notice a new tab has been added to your wp-admin dashboard.

MapifyLite WordPress Plugin Menu

You will see the main tab named “MapifyLite” which includes 3 sub-tabs, namely

  1. Map Settings
    This is where you define your settings for your map. This is the first step in creating your amazing maps.
  2. Map Locations
    This is where you will map your pins, define location details, and add map customizations to the map you defined in the Map Settings.
  3. MapifyPro Installer
    If you would like to explore Mapify’s PRO map features, you can click this tab to unlock MapifyPro’s full potential.

In this tutorial, we’ll walk you through each tab in detail.

Steps to Create a WordPress Map

how to create a map on wordpress

I. Map Settings

Before you define your map pins and locations, you have to create your map and set up your map preferences first in the Map Settings tab.

There are quite a few options here, but they’re pretty straightforward.

Below you’ll find a detailed graphic explaining each feature.

You’ll want to go through each option and set them according to your needs.

A. Map Title

Name your map here. This title will not display on your front-end map, so you may title it anything for reference.

B. Basic Settings

a. Mode: This is where you select standard maps or custom image mode.

What is Standard Map Mode?

By default the map settings will be set to display a Standard Map. This means your map would be like any standard map like Google Maps or Open Street Map. Mapify’s standard map is Open Street Map.

What is Image Map Mode?

If you have your own street map or if you would like to feature specific locations like an amusement park, a zoo, a mall, or a business district, then you would go for an Image Map mode. You can use any image as long as it is in a jpg or png format.

MapifyLite will render this image just like how a Google Map behaves, complete with zoom, pan, and other fun stuff.

Using an image requires you to do the following:

  1. Set the “Mode” to “Image Mode” at the top of the Map Settings.
  2. Upload your image in the “Map Image” option.
  3. Click “Update, Publish, or Save Draft”.
    This is a crucial step as it then sends your image to our servers for rendering, and then sends it back to you. You will see a progress status for this process, and it typically takes about 2 minutes (depending on your bandwidth of course).
  4. After rendering, you will see the image in the map preview area.

Tips for Image mode

We highly recommend using the largest (in width/height, not file size) image you can find. This will result in a better map that can be zoomed in on the details.

However, to do this you’ll want to optimize your image to find a balance of clarity and file size.

The beauty of this technology is that it will take a very large file (file size) and render it to quickly display. However the larger the file size, the longer it will take to render, so keep that in mind.

We recommend keeping the file under 2mb though it can handle much larger files (but will take longer to render).

b. Map ID: After publishing/updating your map, your Map ID will display here. You don’t need to worry about this number as it’s just for reference.

c. Shortcode: This is the code you’ll use to paste your map anywhere on your site. Simply copy and paste this full code to place this specific map.

Note that the shortcode contains the Map ID, and the height/width parameters (which dictate the size of your map when it displays on the front-end.

d. 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 the system default will be the PIN graphic that will display instead.

e. 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 this case, we suggest turning this off.

f. Enable Manual Zoom: This adds the +/- icons for manual zooming on the map via clicking.

g. 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.

h. 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 the first view when a user visits your map on the front end. Details are outlined below this image:

II. Map Locations

After setting up your map, you can start adding locations! Go to the Map Locations tab.

You can add as many locations as you need in this tab. It is just like adding a new web page or blog post, so the process will be very familiar if you are a WordPress user.

Map locations will be organized as shown below

MapifyLite Map Location Settings

Location Details

Each location is set up independently so that they can be as unique as needed.

If you’d like to bulk upload every location in a single action, you may be interested in the Bulk Upload feature available with MapifyPro.

Below you’ll see the full rundown of every feature available when adding a location to your map:

location-settings

III. Publishing Your Map

Now that you’ve added all locations and your map preferences, you can easily paste it into a page or post on your site.

To do so, you’ll want to copy and paste your shortcode. This shortcode is generated automatically and placed at the top of your Map Settings page.

It’ll look like this:

MapifyLite Map Shortcode

Or you can copy and paste this one (just change the map_id to what you see on your screen)

[custom-mapping map_id="2227" height="400"]

Note that there is a height parameter in there. This can be changed to any height you need to adjust the height of the map. Further, you can add a width parameter as well. Here is the full code with both:

[custom-mapping map_id="2227"  height="400" width="500"]

Keep in mind: This shortcode WILL NOT overwrite your theme’s CSS settings.

So, if you publish the map on a page that restricts the width to 450px, the map will not force a larger map area based on the shortcode.

You’ll have to change the Theme CSS as well if this is the case.

You’re good to go!

That covers the full overview of MapifyLite!

If you need more features, feel free to grab yourself an upgrade with MapifyPro as it is by far the most powerful mapping plugin available for WordPress, with TONS of additional mapping features.

Even better, you can seamlessly upgrade without losing a single map setting from MapifyLite.

FAQ

What will I see after Installing MapifyLite?

After successfully installing MapifyLite, you will notice a new tab has been added to your wp-admin dashboard. It is called “MapifyLite” and it includes 3 subtabs, namely Map Settings, Map Locations, and Upgrade to MapifyPro.

How do I create a map on my WordPress website?

First, you have to set up your map preferences in the Map Settings tab. Here, you’ll define the map name, map mode (if using a standard map or image map if you have your own map), how the location pins would display, and the default map zoom view.

Next, on the Map Locations tab, you’ll create the specific locations that you want to pin on the map. You need to create one location for each location that you want to feature or pin on your map. In this section, you can add images and videos you want to feature for every location.

Finally, just copy and paste the map shortcode on the webpage where you want to display your map.

I have my own map image. Can I use this instead of the default map?

Absolutely! Just follow these steps:

1. Set the “Mode” to “Image Mode” at the top of the Map Settings.

2. Upload your image in the “Map Image” option.

3. Click “Update, Publish, or Save Draft”. This is a crucial step as it then sends your image to our servers for rendering, and then sends it back to you. You will see a progress status for this process, and it typically takes about 2 minutes (depending on your bandwidth of course).

4. After rendering, you will see the image in the map preview area.”

Can I create several maps on my website?

With MapifyLite, you can only create one map per website. But you can upgrade to MapifyPro so you can create Unlimited Maps per website plus a ton of amazing mapping features like bulk locations upload, bulk images upload, add map routes, add directions, share to social media, and so much more. Here’s a complete list of MapifyPro features.

Will I lose my map in MapifyLite if I upgrade to MapifyPro?

You’ll definitely keep all your maps when you upgrade to MapifyPro. We made sure you won’t lose all your time and effort creating your amazing maps with MapifyLite.

How much is the Mapifypro?

You can check the features and price comparison for MapifyLite and MapifyPro on our pricing page.

Filed under: Tutorials

Site Caching and WordPress Plugin Errors: A Detailed Guide

by Josh Sears on November 18th, 2019 under Tutorials

Site caching is somewhat a plague upon many plugins and website creators. When enabled, it can force your site not to communicate with external servers, which can cause issues within MapifyPro such as:

  • Maps not displaying in admin or front end.
  • Trouble activating the API Key.
  • In image mode, you may receive an “image not supported” message even though your image is properly formatted.
  • Other strange GPS-releated oddities.

If you run into these issues, you’ll want to purge all caches, or possibly even disable and/or delete your site caching plugins. Site caching comes in many forms, and rather than go into depth on these, we’ll link you to the most complete article we’ve found on the topic, as created by our friends at Elegant Themes:

https://www.elegantthemes.com/blog/tips-tricks/how-to-clear-your-wordpress-cache-a-step-by-step-guide

*Note: If you’re not seeing any maps, whether on the front-end or in admin, you may still need to activate your API. You will see a message at the top of your dashboard if this is the case. 

CloudFlare:

Cloudflare is a third party service that optimizes your site and creates an ongoing backup in the case your site crashes. We are in no way affiliated with Cloudflare, but we use it ourselves on MapifyPro.com. However, Cloudflare implements a layer of caching that can effect your maps just like a caching plugin offered by WP-Rocket, WPEngine etc. Here’s an easy tweak on how you get it to play nice with MapifyPro:

Caching settings: No Query String

1. Log into. your Cloudflare account and navigate to the “Caching” Setting from the top menu.

2. Under “Caching Settings”, at the right you’ll see 3 options. Select “No Query String”. See below.

 

3. Save any settings and that’ss it! CloudFlare will now work perfectly well with MapifyPro.

Site caching is here to stay, but using the above tips will help ensure these services play well with all of our plugins and others!

 

Filed under: Tutorials

MapifyPro Store Locator Plugin Documentation (Version 3.0 and above)

by Josh Sears on November 21st, 2017 under Tutorials, Documentation

MapifyPro Store Locator Plugin Documentation

Table of Contents:

  1. MapifyPro: Installation
  2. API Key License Activation
  3. General Overview
  4. Map Settings
  5. Map Location Settings
  6. Location Tags
  7. Batch Upload
  8. MapifyPro Settings
  9. Adding a Blog Post to a Map
  10. Add Ons
  11. Useful Links and Support Forum

 

 

1. MapifyPro: Installation   

How to Install MapifyPro:

1. As with any WordPress plugin, you’ll want to upload the MapifyPro plugin file (mapifypro_master.zip) in your ‘Plugins’ tab in your WordPress admin.

2. Under the ‘Plugins’ tab, click “Add New’ as shown here:

3. At this point you will see a selection of WordPress plugins, but you can ignore them and simply click ‘Upload Plugin’ as shown below (image on next page):

4. Click the ‘browse’ button and locate your mapifypro_master.zip file that you downloaded after purchasing MapifyPro.

5. After the plugin uploads, select the ‘Activate Plugin’ option. That’s it! You’ve successfully installed MapifyPro and are ready to activate your API Key.

 

2. API Key License Activation   

Now that you’ve installed MapifyPro, you’ll notice a new tab has been added to your WordPress admin. This will be where you’ll spend most of your time. However the first thing you’ll want to do is activate your license (whether it’s a single license or unlimited use license). Here’s how:

1. You’ll see a new notification at the top of your dashboard that will take you where you need to go, but otherwise: Navigate to your ‘Settings’ tab in WordPress admin. After installing MapifyPro you’ll see a new sub-section labeled ‘MapifyPro License Activation’.

Click this tab to go to the page where you’ll enter your activation key. *Note, you’ll have received a unique license key with your purchase. You can find this under My Account > API Keys. Note that you will also need to use the same email used while making the purchase in the following step.

2. You will now see the license activation page:

3. Tips: Note that in some cases, the ‘Deactivate API License Key’ option will be selected, which will prevent the license from being active. If you are having trouble activating your license, ensure that this option is NOT selected under the License Deactivation tab. It should look like below:

 

3. General Overview   

After successfully installing and activating MapifyPro, you’ll notice that a new tab has been added to your WordPress admin, titled ‘MapifyPro’. Below is a brief overview. We will cover each section in detail throughout this documentation.

That covers the basics and you should be all set to start creating your first map!

 

4. Map Settings   

Creating a library of maps with MapifyPro is very simple, but also contains a lot of options. 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. To start, just like many WordPress items (blog posts, plugins, etc.), you’ll simply click ‘add new’ at the top of the ‘Maps’ page to add your first map. Below is an image that showcases this button, as well as an overview of the ‘Maps’ page and how it will look after adding multiple maps. The tutorial on adding an actual map will continue below this image:

With version 3.0 and above of MapifyPro, the Map Settings section has been fully overhauled for the best user experience possible. Below we will outline every feature, and how it relates to your map:

MAP TITLE: Name you map here. This title will not display on your front-end map, so you may title it anything for reference.

BASIC SETTINGS:

This section will contain all basic items to setup your map, as outlined below:

a. Mode: This is where you select standard maps, or custom image mode.

b. Map ID: After publishing/updating your map, your Map ID will display here. You don’t need to worry about this number as it’s just for reference.

c. Shortcode: This is the code you’ll use to paste your map anywhere on your site. Simply copy and paste this full code to place this specific map. Note that the shortcode contains the Map ID, and the height/width parameters (which dictate the size of your map when it displays on the front-end.

d. 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.

e. 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.

f. Enable Manual Zoom: This adds the +/- icons for manual zooming on the map via clicking.

g. 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.

h. 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.

i. Pop-up Text / Labels

This area let’s you change the text that appears in the pop-up after a location is clicked, as shown below:

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 Mapifypro.com:

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 Mapifypro.com:

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:

Left Orientation Tooltip with featured image:

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 > Map Image: When in image mode, this is where you’ll upload your image to be used as the map. 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.

PUBLISH AND MAP FILTER TAGS (Right Sidebar): In the right sidebar you’ll find one more important MapifyPro-specific feature. This is where you’ll establish the filters that will appear on this map. Also, when all settings are updated, you’ll click Publish (or Update) to apply changes, just like a blog post. We’ll cover the filter details beneath the following reference image:

a. Publish/Update: When updating or creating a new map, be sure to click this button to apply changes, just like any WordPress page or post.

b. Map Filter Tags: In the image above, you’ll see the area we’re referring to. Creating Map Filters is a 2 step process. First, you must create the filters here in the map settings. This makes them available on the map and any location that appears on the map. Next, when you’re creating a location, you’ll then assign a tag or tags to the location (the same filters you create here). Here’s a work flow of how this would work.

In the sidebar here in the MAP SETTINGS page, I’ll add 3 Filter Tags: Hotels, Restaurants, and Pubs, clicking “Add” after I enter each. This will add the filter to the maps library of filters.

Next, I will create my location (more details on this in the next section). While creating the location, in the “Map Filters” section, I will “tag” the filter I want to apply. For example, if I create a location that is a hotel, I will tag that location with the HOTELS filter I created in the map settings. This means that on the front end map, when a user selects the HOTELS filter, the locations I tagged with the HOTELS filter will then show on the map. The same goes for Pubs, and Restaurants.

Filters can be combined as needed for various results.

That covers your map settings! After you’ve made all changes, simply select “Publish” and your map will be available to place anywhere on your site! But first, you’re going to want to add locations, so that’s what we’ll cover next.

5. 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 ‘Map Locations’ sub-section of the MapifyPro section found in your WordPress admin.

Similar to adding a map, you’ll want to click the “Add New” button on this screen to add a new location to your map(s). The next section will outline each feature available while adding a new location, how it works, etc. Here’s an overview:

When clicking “Add New” or editing an existing location, here is a complete list of what you’ll find on the location settings page:

TITLE: Like a blog post, 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: Again like 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. See below for more details (image on next page).

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 same settings) to more than one map. To include the location on any map, simply click on it until you see it move to the right category, as shown below.

 

MAP 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.

Sidenote: Since you can add a location to multiple maps — each potentially with their own unique tags/filters — then these will be grouped by map below this section. In the following example, we show the case where we added the location to 3 different maps, each with their own set of filters/tags. Note how they are grouped accordingly, allowing you to tag this location as needed for various filtering behavior on each map:

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. 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).

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 Images” and you can either select them from you media gallery, or upload them. MapifyPro allows you to select all images to be included, and 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.

Note that you can 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.

Location: This is where you plot the location on the map, whether by entering an address 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 you 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.

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.

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 get traffic. You can select the exact social media pages you’d like to enable sharing for, and a corresponding icon will be added to the popup as shown here:

 

The Location Settings Sidebar: There are a couple more options in the right-most sidebar of the map location settings page, which we’ll cover here:

1. Categories: Since each location is an actual post, and behaves as such, you can add a location to your blog. This will create an article-style version of the location details you’ve just entered, and allows you to feature the “story” on the map and on your blog.  The categories section allows you to place the location, in article format, under a specific category that you’ve created for your blog. So, when the user is reading your blog and clicks this category, they will see a list of map locations in article format. This is very handy for travel bloggers.

2. Map Filter Tags: When you click on a map filter from under the corresponding section on this page, it will be added here. You can also remove them if you prefer, which would exclude the location from being featured when the filter is clicked on the front-end map.

3. Featured Image: This is where you’ll add an image that will appear in the tooltip as a thumbnail. Simply click her to upload the image, and MapifyPro will render it to properly display on your tooltip.

6. Location Tags   

For the most part, you will assign and tag your filters under the Map and Locations settings. However, they will also be grouped here for easy management. More importantly, if you’re using the “Map Filter List” feature — which allows you to include a visual “legend” beneath the map — this is the location where you’ll assign images to the filters. Here is an overview of what you’ll see:

By default, the interactive list will use the icon assigned while setting up your location. However you may wish to use a different icon for the filter than what you used on the actual location markers, so here’s how you’d do that:

1. Under the Location Tags tab, click on one of the tags that are in list format (see above image for reference).

2. You will then see the following page. Using this image as a reference, you can see how easy it is to assign a custom icon to a filter tag:

3. Click “Update” and that’s it. You now have a custom icon on the filter, which will appear as shown below on your filter list:


7. 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.

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:

 

8. MapifyPro Settings   

This section is a small setting that controls our 3rd party sharing solution, which is used for sharing locations across various social media sites. This is set to ‘Yes’ by default and can pretty much be ignored, as it is simply used for troubleshooting. For example, if you already have “ShareThis” loaded as a separate plugin, you can set this to ‘No’ to prevent it from loading twice on your site and causing potential conflicts.


9. Adding a Blog Post to a Map   

By this point you’re probably very familiar with adding locations to a MapifyPro map. Since locations are actually just like posts, MapifyPro integrates 100% with ACTUAL blog posts too (an amazing feature for travel bloggers, restaurant reviews, etc.). To add an article to any of your maps, you’ll write the article under your “Posts” section, just as you would any blog entry. The only difference is that you’ll notice a new section has been added under the blog article section, that being “MapifyPro Options”. This is the section where you’ll add the article to any maps as needed, just as you do when creating normal map locations.

To do so, you’ll want to expand the “MapifyPro Options” tab under your article, as seen here:

All Map Location settings found in this tab are the exact same ones we covered in section IV, so refer to that section for details on each feature.

Since MapifyPro’s location pop-ups are dynamic, after you’ve added a blog post to a map, it will automatically be formatted based on your style options that you set in your map settings (See section III for more details.). So the header and accent colors will reflect your style choices. Furthermore, the posts will be complete with their own comments section, sidebar, and sharing options. Lastly, the article will still be added to your normal blog, and will not affect the style of the blog itself. Check out the screenshot below to see an example of a blog post and how it appears on the map! Note also that these pop-ups are 100% responsive, include inline comments, and more! It’s the perfect feature for those who’d like to write blog posts about their travels.

 

10. Add Ons   

MapifyPro supports add-ons that let you customize your maps even more than the core features. For example,

PrettyRoutesPro lets you add unlimited, colorful routes to your maps, and serves as a powerful add-on to MapifyPro, or a stand-alone product: Get PrettyRoutesPro Here

• CrowdMaps lets ANY visitor add locations to your map, which is perfect for building communities, encouraging traffic, and building a crowd-sourced collection of map locations: Get CrowdMaps Here

We are constantly adding new add-ons, so keep tabs here: MapifyPro Add-Ons

11. 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 

NEED SUPPORT?

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:

MapifyPro Support Ticket System

FAQ

How to install MapifyPro?

1. As with any WordPress plugin, you’ll want to upload the MapifyPro plugin file (mapifypro_master.zip) in your ‘Plugins’ tab in your WordPress admin.

2. Under the ‘Plugins’ tab, click “Add New’

3. At this point you will see a selection of WordPress plugins, but you can ignore them and simply click ‘Upload Plugin’

4. Click the ‘browse’ button and locate your mapifypro_master.zip file that you downloaded after purchasing MapifyPro.

5. After the plugin uploads, select the ‘Activate Plugin’ option. That’s it! You’ve successfully installed MapifyPro and are ready to activate your API Key.

Filed under: Tutorials, Documentation

Scroll to Top