1. Start
  2. Installation
  3. The Mapify.it Interface
  4. Adding a New Map
  5. Adding/Editting Locations
  6. Displaying a Map on Your Site
  7. FAQ
  8. Credits

Mapify.it

100% Custom Google Maps for Wordpress


Thanks for picking up the Mapify.it Plugin! The following documentation covers installation and implementation of your maps, as well as all of it's cool features. If you have any questions regarding the plugin, feel free to get in touch and I'll be happy to help you out personally. Enjoy!

Installation


How to Install:
1. Upload and unzip `mapify.it.zip` to the `/wp-content/plugins/` directory
---OR----
Choose the "Add New" option under the 'Plugins' section of your Wordpress admin (recommended)
2. Activate the plugin through the 'Plugins' menu in WordPress by clicking 'activate'.
3. That's it! Your Mapify.it plugin is now installed. 

 

What you'll see after installation:

-The Mapify.it Plugin adds 2 new section to your Wordpress admin Panel:

1. Custom Mapping: This is where you adjust the settings to your maps, toggle Google Maps, add images, etc.

2. Map Locations: This is where you will add and manage your map's custom locations.

Both of these sections are explained in detail within this document.

 

The Mapify.it Interface


Once properly installed, your Wordpress admin panel will include 2 new sections called "Custom Mapping" and Map Locations. Here is an explanation of each interface:

1. Custom Mapping: Click this option to go to the core Mapify.it settings interface, which is shown here:

 

Here is a detailed explanation of each option:

Mode: Use this setting to choose either Google Maps mode, or Custom Image mode. Google Maps mode displays an actual Google map, with all of Google Map's features, but enhances it with the additional Mapify.it features: Pop-up galleries that support video and photos, custom tooltip descriptions, custom pinpoint, and address-specific locations. Custom image mode allows you to use an image of your choosing, such as a custom map graphic.

Pin Image: This is the small pinpoint that indicates locations on your map. Mapify.it allows you to use any image for pinpoints, such as thumbtacks, pins, etc. These can be implemented in either mode and will overwrite the Google Map pinpoint if using Google Maps Mode.

Map Image (default view): This is where you upload the default version of your map. The default version is what first appears on your site, and is "zoomed out".

Map Image (zoomed in): This is the "Zoomed in" version of the map, so it is a larger version of the image you uploaded for the default view. We reccomend a compressed jpeg for this image no larger that 500kb to keep your site loading quickly.

*Note: Map images must have the same aspect ratio to properly display locations. So, for example, when resizing in Photoshop make sure you have the "Constrain proportions" setting on.

Background Color: Mapify.it allows you to specify a background color when using Custom Image maps. This is useful if you use a transparent .png for your map images. To use, simply click in the field and enter a hex value, or select the color from the color chooser that appears. To reset it to transparent, simply click the 'transparent' link.

Map Drag Momentum: This setting allows to to adjust the "drag" momentum on the map while in Custom Image Mode. This gives the map an sleek, app-like feel that emulates Google Maps when dragging and dropping the zoomed-in map. We reccommend setting it to around 400%.

 

2. Map Locations: Click this option to add and manage your maps locations. This section contains 2 main pages. The first is the location overview screen, which looks like this:

 

Map Locations Overview (shown above): This page contains all of the pinpoints you've created thus far. By default it will be blank, but all of your locations will be stored here for future reference. You may edit any location at any time by selecting them from this menu. Alternatively you can choose to add new locations to your map here as well (explained in the 'Adding a New Map and Locations' section of this document.

 

Edit Map Location Screen: The second portion of this section is the actual "Add a New Location screen. You reach this by clicking an existing location from the screen shown above, or by clicking "Add New" next to the Map Locations title. This screen is where you'll spend most of your time adding/editting your locations, so we've included the follwoing screengrab which explains each element's function: