Hey there. We’ve put together a detailed tutorial below for MapifyLite. Don’t have a copy yet? Grab it: It’s free and pretty darn cool!
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. Amazingly, it is called “MapifyLite” and includes 3 sub-tabs. In this tutorial we’ll walk you through each below, but here’s how it’ll look:
Step 1: Create a Google Browser Key:
As of July of 2016, Google now requires a Google API key for any use of their API. Generating a key is absolutely free, and takes about 2 minutes. We have setup a FAQ for the process, so check it out here.
After generating your key, you can enter it in the 3rd tab, MapifyLite settings. You’ll know you did it right when you see the map in your map/location settings. If you see the “Oops something went wrong” where the map should appear, you may have incorrectly setup your Google key.
The first tab is where you’ll create your map. There are quite a few options here, but they’re very straight forward. This is where you’ll want to start after generating your Google Browser Key however, so let’s dig in. Below you’ll find a detailed graphic explaining each feature. You’ll want to go through systematically and set them to your needs:
Using Custom Image Mode Vs. Google Maps mode:
-By default the map settings will be set to display a Google Map, but you can use ANY image you like as long as it is a jpg, png, or svg format. MapifyLite will then render this image so that it behaves just like a Google Map, complete with zoom, pan, and other fun stuff. When using Google Maps, it will display just like in the image above. However, using an image requires you to do the following:
- Set the “Mode” to “Image Mode” at the top of the Map Settings.
- Upload your image in the “Map Image” option.
- 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).
- 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).
After setting up your map, you can start adding locations! You can add as many locations you need in this tab, and they are setup like pages/posts, so the process will be very familiar to WordPress users.
Locations will be organized as shown:
Each location is setup 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:
Publishing Your Map:
Now that you’ve added all locations and setup your map, you can now 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:
Or you can copy and paste this one:
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 height="500" 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, and features TONS of additional features. Even better, you can seamlessly upgrade without losing a single setting from MapifyLite.
Filed under: Tutorials