Table of Contents: I. MapifyPro: Installation. II. General Overview & License Activation. II.2 Adding Your Google API Browser Key: New Requirement!

Transcription

1

2 Table of Contents: I. MapifyPro: Installation II. General Overview & License Activation II.2 Adding Your Google API Browser Key: New Requirement! III. Map Settings IV. Map Location Settings V. Map Tags VI. Batch Upload VII. MapifyPro Settings VIII. Adding a Blog Post to a Map VI. Add Ons X. Useful Links and Support Forum *Note: This guide, and all content, is _Copyright PaperTelevision LLC.

3 I. MapifyPro: Installation Installation: 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 4. At this point, simply 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 start creating your first map! II. General Overview & License Activation *Note: For version and above we no longer require a license activation as this is handled by your subscription level. a. 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. Navigate to your Settings tab in WordPress admin. After installing MapifyPro (or PrettyRoutes) 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 your account page. Note that you will also need to use the same used while making the purchase in the following step.

5 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: b. What s new after installing MapifyPro: 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. II.2 Adding Your Google API Browser Key Since June 2016, Google Maps requires a special Google Maps browser key. Without this key, you cannot display Google Maps on your website. 1. Go to the Google API Console. 2. Click Get A Key : a. A pop-up appears: If you want to use an existing project, please select it from the list.

6 b. Otherwise, select Create a new project and enter a project name in the new popup: 3. Click Enable the API (existing projects) or Create and Enable API for new projects. 4. Copy the generated browser key from the popup, you ll need this to enter in the MapifyPro settings later. Note the popup says you re all set, but it s not quite true. You ll want to click on the GO TO CONSOLE link under API console: Continued on Next Page

7 5. If not already there, go to the Credentials tab where you ll see the screen below. You ll want to click the Key Restriction called HTTP referrers (web sites) option, as shown here: This will prevent other folks from using your key if it is somehow leaked. After you select that option, you ll be presented with the following screen:

8 As shown above, you ll want to enter your domain under the Accept requests from these http referrers (web sites). This is very important and should be formatted as follows (with your domain entered): *.yourdomain.com/* This format allows any queries from your site, from ANY page, to be registered as permitted to use your specific key. You can place your maps anywhere on the site this way. Additional Reading: This link covers the same stuff, but good to know: To prevent quota theft, secure your API key following these best practices. Here are some helpful tips specific to our software when generating your key: 1. To have a key that works for any domain do not enter any value in the domain field and delete any added domains. So if you have just a wildcard character for the domain - remove that as well. Note that wildcard keys are not suggested for production use as they are public and exposed and any sites using the same key will count towards the same API usage limits. To specify a domain the best practice is to enter it as follows: *.yourdomain.com/* 2. Make sure the generated key is a "Browser Key". When creating a new key you should see a popup asking what type of key you wish to create - make sure "Browser Key" is selected. You can confirm the key you already have is of the correct type if it says "Browser API key" at the top of the key details page in the Google API console. 3. Keys take time to update so even if you see an error when you've confirmed you've setup everything correctly it may still be down to just waiting minutes for the settings to propagate throughout Google's servers. 4. If after confirming your settings are correct, waiting enough time and you still see an error instead of rendered maps open up the browser console and see if there are any Google Maps error messages shown (attached is an example). After you've successfully generated your key, go to the MapifyPro tab in wp-admin, select "MapifyPro settings" and you'll see the field where you'll want to enter the key: All done! Your maps should now be displaying as expected. If not, you will see a gray map and an Oops! message directly where your map should appear. In this case, please review the above. Now that that s done, let s start adding some maps!

9 III. 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: a. Map Settings Below you will see a full breakdown of the map settings, and their basic functions. This page is reached when adding a new map, or when editing an existing map under the Maps tab. Map ID: This is the unique id given to the map, and is automatically added to the shortcode that is generated on the list view of all your maps. You won t really need to bother with this one. Mode MapifyPro allows you to use Google Maps or Custom Image Mode. Use this toggle to select your preference. Google Maps: This is the default setting, and will let you use Google maps for this specific map. This

10 means you can use all of MapifyPro s feature atop Google Maps, and can also style the Google Maps look with Snazzy Maps. Further, if you need GPS functionality, such as providing directions, you ll want to stick with Google Maps Mode. Image Mode: Image mode is to be selected when you prefer to use a custom image for your map, such as a jpeg, png, or gif. This unique mode allows you to use ANY image for a map, and will render a zoomenabled image that maintains visual quality at all zoom levels. Further, it implements nearly all MapifyPro features on top of the image map, excluding only those that rely on GPS info. You can even create search and filter criteria! Enable Search This setting adds the search field to your map, allowing users to search for locations by city, zip code, or GPS coordinates. Enable Front-End Search Radius *New to version and above Allows front-end users (your site s visitors) to specify a radius in which they like to search. This can be set to miles or kilometers, and when used will search and display locations only within the radius specified. Front-End Search Radius Options *New to version and above Allows you to specify the exact distance made available for the front-end search radius. This allows more specific distances in case you are focusing on a small neighborhood, or worldwide. Leave blank for the default values of 5, 10, 25, 50, 100, 500 miles/kilometers search radius options. Enable Filter Dropdown This setting adds a dropdown to the top of the map that includes your custom filters. On selecting from this list, the map will filter the location results to show only locations that were tagged with the selected item from the dropdown list. Enable Filter List If set to yes, this toggle will add a visual filter list beneath the map. It behaves the same way as the drop down (see above) but includes a custom icon, and places all options front and center, much like an interactive map legend. Here s an example (note the list at the bottom of the map).

11 Enable Interactive List of Locations This toggle will add a location directory beneath the map. The location directory groups all included locations (you can specify which ones to include on a per-location basis) into an organized list. The list includes preview info for each location, directions buttons, and a more info button to bring up the location s pop-up gallery. It also automatically paginates the list into an organized design. Number of Locations in List *New to version and above You can specify the exact amount of entries you d like to include beneath your map. Default is 3 locations in the list, after which pagination is automatically added. Enable Clustering Cluster feature will automatically group nearby locations depending on the map s zoom level. It s a great way to keep things organized and clean if you have a lot of locations. Clicking on a cluster will automatically zoom in and expand the locations within.

12 Default Pin Image This section allows you to apply a pin that will serve as the default graphic for locations. This comes in handy if you have a lot of locations using the same icon, and prevents the need to upload an icon for every location. You can then assign different icon/marker graphics for other locations, if needed, and they will overwrite this one, while others will keep this default graphic. Enable Zoom Enables/Disables mouse zoom on the map. Sometimes Google Maps can be frustrating on a website as users will get stuck in the map as they scroll down a site. Turning this option off will lock the map in place, though you can still provide a means to zoom in the next option. Enable Google Controls This option adds/hides manual zoom buttons in the top left of the map. This can be used in combination with the Enable Zoom option. For example, you can disable zoom, but set this setting to yes in order to provide a manual means of zooming in/out on the map, while disabling mouse zoom. See top-left of the image here for an example: Animated Tooltips/Pinpoints These 2 settings enable/disable the subtle animations that appear on location pinpoints (on loading the map) and the tooltips (subtle animation on hover). Center Map on Search Results/Filters These 2 settings specify whether the map should auto-center and auto-zoom on locations when they appear in a search or after a filter is selected. Disabling this option will simply show the location, but not zoom to highlight the location in the center of the map. We recommend keeping this setting to yes for the best user experience, especially on mobile. Colors There are 6 settings in the color section, which allows you to customize the appearance of your map and gallery pop-ups. Map Background: This applies a default color to your map background while using custom image mode. So, if you use a transparent.png for your map, this color will be in the background.

13 Tooltip Background: This is the color of the tooltip that appears while hovering over a location. Pop-up Background: This is the color of the gallery pop-up s background, typically white. Pop-up Header: The space that appears at the top of the article-style pop-up. Pop-up Date Background: Article-style pop-ups contain a date, just like a blog post. This is the color of the small circle in that space showing the date. Pop-up Accent: Controls the accent color of the pop-up, such as links and titles. Image Mode Settings This section allows you to upload and render a custom image if using Custom Image Mode. MapifyPro uses a unique image rendering method that sends your image to our server, and renders it into multiple, fast-loading tiles. This creates a seamless image that maintains visual integrity at every zoom level (unlike normal images viewed on the web). It emulates the feel of an actual Google Map, and lets you use nearly all of MapifyPro s features on ANY image. ***You only need to upload 1 image*** All zoom levels will be automatically implemented. Note that this is a one-time process for each map, and can take 2-3 minutes to process. After selecting an image to use as your map, you must click Update or Publish to enable the rendering process. You will then see the percentage complete as the image is rendered. Once complete, you re good to go! You ll be able to see they mage while adding locations. Note also that you must set your map mode to Image Mode under the Mode setting to enable this. Google Maps Mode Settings Mode: While using Google Maps mode, you can specify the type of Google Map to display: Road, Satellite, Hybrid, or Terrain. Note that if you use Snazzy Maps (the next section titled Style ) it will overwrite this setting. Style: This is the setting that lets you select and preview a Snazzy map style for your map. We have included multiple styles for a great range of styles while using Google Maps. For more about Snazzy Maps, including instructions on adding more, go here: Search Radius Unit: (New to version ) Allows you to specify miles or kilometers in the front-end search radius option. Search Radius: This setting allows you to specify the radius, in miles, of how far MapifyPro should look for locations when a user enters a search inquiry. For example, if I set this to 15 miles, and a user enters a zip code on the front-end map, then MapifyPro will look for locations that I ve added to the map within a 15-mile radius. This setting relies heavily on your map, how far locations are apart, and so on. Note that if no locations are found within a given search, MapifyPro will suggest the nearest location automatically. Search Region Bias: (New to version ) Allows you to specify a preferred country for the map searches. This is useful when the zip/postal codes use the same format as the United States (For example: 90210). MapifyPro will default to searching the US, so if you do not specify your country here, you may

14 get a No results found result when searching. Main Location & Initial Zoom: This allows you to specify a location where the map should center upon by default. Combined with the map below, you can assign the default zoom level of the map as well as where it should be centered on default. With these two settings, you can showcase entire countries, or zoom in to focus at street level to highlight a specific neighborhood. Additionally, this map shows you a preview of the map style you have selected in the Style setting. A Note About Add-Ons: Certain Add-ons are integrated directly into this page. For example, if you ve installed CrowdMaps, you will see those settings here. Please consult the CrowdMaps documentation (or the documentation for the add-on you re using) for more details. Assigning Tags for Filters Note: Tags in the case of MapifyPro, correspond with the filter labels used to filter results on the frontend map. In the right sidebar of the map settings, you can assign Map Filter Tags. This sets the filters available to the map, so you ll want to set these before adding locations. After these are in place, you can then assign them to locations as needed. Therefore, if someone clicks this filter on the map, only locations assigned the specific tag will be displayed. Here is an example of 2 filters added to the map settings, and how they are reflected on the front-end map.

15 IV. 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 popup 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).

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

17 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 to version 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. (example image on next page):

18 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: 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 (See section called Maps for more details). The example below shows the feature list where the location will be included, if set to yes:

19 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. This field allows you to specify what will appear in that area. See below for example. 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

20 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. The Location Settings Sidebar There are a couple more options in the sidebar, 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. Alternatively you can do this in reverse, by creating a blog post and adding it to the map, but we ll cover that in the next section. The categories section allows you to place the location, in article format, under a specific category that you ve created for your blog. 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. V. 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 (example on next page):

21 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 (example image on following page):

22 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: VI. 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

23 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: VII. 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. Important: As of July 2016, Google requires all instances of its Google API to use a Google Browser

24 Key. We cover this at the beginning of this documentation and it is a crucial step. We have implemented this ability in version of MapifyPro and above, as well as in our latest add-on plugins. Please update your files to see this option or your maps will not display! See Section II.2 of this document for full instructions on how to generate you key. It is 100% free and only takes about 2 minutes. VIII. Adding a Blog Post to Your Map(s) 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.). So the header and accent colors will reflect your style choices. Furthermore, the posts will be complete

25 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 too. VI. 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: 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: KMZpro lets you add unlimited.kmz files to your maps, meaning you can add layers, polygons, detailed routes, and more to any map: We are constantly adding new add-ons, so keep tabs here: Useful Links and Support System Can be Found on the Following Page:

26 X. Useful Links, FAQ, and Support Forum Blog: Latest news, video tutorials, case studies, and freebies: Facebook: Get the latest promo codes and more by liking us on Facebook: Twitter: Follow us here: NEED SUPPORT? MapifyPro comes with extensive support. If you re still having trouble after reading this documentations, feel free to visit our knowledge base and support system here: