Mapify.it

100% Custom Google Maps for Wordpress

Created: 03/10/2011
latest Update: 06/27/2012
By: Josh Sears
Email: josh@papertelevision.com

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:

Adding a New Map

This section shows how to add a new map, as well as new locations to the map, from start to beginning.

1. Mapify.it Settings: The first step is to properly configure the Custom Mapping settings page. For this example, we will be adding a custom image to display our map in custom image mode, just like what you see in the demo. First, be sure to navigate to the 'Custom Mapping' Tab on the Wordpress Admin Panel:

2. Setting Mode: Make sure that the 'Mode' dropdown setting is set to Image:

3. Uploading New Images: You will now need to upload 3 images: the first is the custom pinpoint, second is the default map image, and finally the zoomed in version of the map (see 'The Mapify.it Interface' section of this document for more info). Uploading these images is the same for each step, for this example we'll upload a new map image for the default view. Do so by clicking the 'Select Image" button, as indicated by the arrows here:

3.1 Image Selection: This will bring up the Wordpress Upload Image interface. To add a new image, you simply drag the file from your desktop, or click the button, as shown here:

3.2 Image Details: Once the file has been uploaded, you will be able to add details. For the sake of this example we'll simply make sure that the image is set to Full size (so that it properly displays as we intend), and click the "Insert into Post Button, as shown here:

*Note that you must click Insert into Post for the map to properly be displayed. Otherwise it will simply be stored in your library.

3.3 Rinse & Repeat: Simply repeat these steps for each image: Pinpoint, and the zoomed in map, and you'll be ready to go.

4. Background Color: Next, we'll want to specify the details of our map, such as the background color and the Momentum percentage. First, let's set a background color, which is handy if you're using a transparent .png image. To change the color you simply click on the field next to the 'Background Color' setting. Then, simply enter the color's value, or select it from the color selector, as shown here:

5. Momentum: The final step to setting up your map is to assign a Map Drag Momentum percentage. This is the setting that gives our map image a sleek drag and drop action similar to Google Maps. To do so, simply enter a value of your preference in the field next to the 'Map Drag Momentum' section. We recommend somewehere around 400-450% to emulate Google Maps:

That's it for the setup! Next we'll move onto adding a new location.

Adding/Editting Locations

The other core section of Mapify.it admin is the 'Map Locations' portion of the panel. What follows is a detailed tutorial on how to add a new location:

1. Map Locations: Adding vs. editting locations is much the same. To edit, you simply choose an existing location that you have previously added. However for the sake of this tutorial, we are going to show you how to add a new location, which follows the same process. To do so, click the 'Add New' option on the Map Location page, shown here:

2. Enter Details: You will be taken to the 'Add a New Location' interface (see a detailed explanation of this interface in the 'The Mapify.it Interface' portion of this document. The first step is to enter a Title to your location, followed by Entering the main content of your pop-up, all of which are done in the first two fields on this page, as shown here:

3. Tooltip info and Video Details: After you enter the main details, you'll want to specify what should appear in the tooltip,as well as if you'd like to feature a video in your popup. Do that in the following three fields, shown here:

4. Adding Locations: Now that you've finsihed up the details, it's time to add the actual locations. This is in two parts: one for Google Maps, and one for Custom images. We'll explain both as it is a good practice to add the locations to each version despite which mode you're using, just in case you want to toggle it later. That way you don't have to change each and every location's settings down the road.

4.1 Adding a Location to Google Maps: For the Google map, you can add information 1 of 2 ways: by entering a specific address, which will automatically add the pinpoint, or by double clicking on the actual map (good for plotting locations without an address). Do so using the fields shown below. As you can see I've entered "Bangor. Maine" as an example (also note that, despite showing Google's default pinpoint, the map on your site will show your custom pinpoint):

4.2 Adding a location to the Custom Image: Entering a location to your custom map is as easy as double clicking on a location of your choice within the map's image. You may drag and drop this map to adjust the map and add locations to anywhere on the map:

5. Publish the Location: Now that you're finsihed adding your location, simply click "Publish" in the right-hand sidebar of the page, shown here:

That's it! Your map's location has now been added.

Displaying a Map on Your Site

After properly setting up the Mapify.it settings and adding locations, you can display the map on any page or post within your wordpress site. To so, you simply use the shortcode shown here:

[custom-mapping width="584"]

Edit the width to whatever size you would like the map to dispaly, and the vertical height will be dictated by the size of your image uploaded in the settings. This is why it's imparitive that you upload an image even when using Google Maps mode, as Mapify.it does it's map by using the image's proportions.

*Note that a few factors can effect the proper display of your map, including CSS settings for your blog. For example, if your blog's column is set to 500px width, and you set your map width to 600 in the shortcode, a portion of the map will be cut off. Also, using a width setting that is wider than the image you've upload could cause a distortion effect, or blurring of the image, so always make sure your values are consistent.

FAQ

Here are a few common Questions for quick reference, all of which repeat things I've covered in previous sections:

= How do I display a map? =

Use the shortcode `[custom-mapping width="584"]` within your blog post or Wordpress Page. To properly display a custom map image on your site, make sure the width in this setting (currently "584") is the same as your smaller version of the map image that you've uploaded in the custom mapping section.

= How do I create a location on the map? =

After activating the plugin a new administration section called "Map Locations" will be available, and you can add/edit map location from that section by following the instructions.

To add a location to Google Maps: Simply enter the address to the exact location of your choosing and Mapify will automatically add the pinpoint. You can also double click to add a location directly to the map, or drag and drop an existing location.

To add a location to a Custom Map: Simply double click on the location of your choosing. After adding a location, you may also drag and drop the pinpoint and mapify will self-adjust to the new location.
Note: All Locations are stored separately in the section called ÒMap LocationsÓ, located in the sidebar of the Wordpress admin. These are organized separately to keep things nice and organized, and also so itÕs easy to edit locations in the future.

= How do I add images and video to a map location's Pop-up window? =

To add images to a locations pop-up window: You can upload as many images as you like to each map location through the "Upload/Insert" facility located just above the text editor on the map location edit screen.

To add a video to the pop-up window: Each location allows you to include an optional video in the pop-up window. To do so, simply enter the embed code from your favorite video site into the field called ÒVideo Embed CodeÓ, which is found on the Map Location entry.

For example, if you want to include a video from Youtube, it would look like this:
<iframe width="472" height="316" src="http://www.youtube.com/embed/u0fk6syQ7iY" frameborder="0" allowfullscreen></iframe>

= Can I edit the tooltip that appears when someone hovers over a location? =

Yes, and it's easy! In the Map Location screen, there is a field called ÒTooltipÓ. Edit this field to specify the description of each location. This is what appears when someone hovers over those location pinpoints.

= How do I add a custom map image? =

After installing the plugin, there will be a section called ÒCustom MappingÓ added to your Wordpress Admin section (typically it is found in the lower half of your sidebar). On this page, you will find settings for how you would like to display your map (Whether to use Google Maps or a custom image) as well as the ability to add the images for your custom map. This is found under the section called "Image Mode".

Good things to know about custom maps:

-For custom maps, you need to provide 2 images: a small one and a big one. This allows you to zoom into the map on the live version of the site.

-Mapify supports any image format (jpg, png, gif). You can also use a transparent image, which will then allow you to specify the background color of the map via the Mapify settings found on this page.

-Keep file size in mind! We recommend optimized images under 200kb for quick loading.

-DON'T FORGET TO CLICK "INSERT INTO POST WHEN UPLOADING NEW IMAGES"

= How do I add a custom pinpoint images? =

On the Custom Mapping page, there is an option to upload a custom pinpoint. This pinpoint will appear whether you use google maps or the custom image modes of Mapify. When uploading or selecting a new pinpoint image, don't forget to click "Insert into Post" at the bottom of the Meida pop-up.

= What if I just want to use Google maps, but with Mapify's added features? =

On the Custom Mapping page, there is a toggle under the "General" section called "Mode". Simply make your choice whether you want to use Google Maps or a custom map using this option.

Using Google maps allows all of those great familiar features, but also lets you use Mapify's best features, such as custom tooltip descriptions, custom pinpoint images, and pop-up galleries for each location! You can also specify the size and location of your google map, which is much easier than editing code.

Credits

A few shoutouts:

-Lightboxes by Colorbox plugin by Jack Moore, http://www.jacklmoore.com/colorbox

-The Mapify.it team resides at http://www.papertelevision.com Swing by the site and say hello!