Created: 2014/03/22, revision 9
By: Web factory Ltd
Support: only via CodeCanyon
Thank you very much for purchasing our premium WordPress plugin. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form. Have a good one!
5sec Google Maps Pro requires WordPress v3.6 or higher to function properly!
Install and active the plugin. No need to change any settings unless the plugin warns you of a shortcode name conflict. In that case you have to disable other map plugins or change our shortcode name in the settings. Open any page, post or text widget.
Map builder is the quickest way to create a new map however for a quick start use this shortcode to get a nice map centered over New York (with a bouncing pin) and Washington;
[map width="100%" height="400px" autofit="1"] [pin bounce="1"]New York, USA[/pin] [pin]Washington, USA[/pin] [/map]
All options in the map builder have in-line help - just click the question mark icon or familiarize yourself with them by reading the rest of this document.
Plugin settings are available under the Settings - 5sec Google Maps Pro menu. Following settings can be adjusted;
All other setting are configured via the shortcode on a per-map basis.
Map builder will help you to quickly build, preview and insert maps into content without having to know any shortcode parameter names.
The builder can be found under the content editor of posts, pages and all custom post types. Builder's left hand side controls the list of saved maps allowing you to save, load and delete as many maps as you need. Right hand side hold map properties as well as an arbitrary number of pins that will be placed on the map. Map preview is shown below it.
Each property has a blue question mark icon besides it that you can click and get quick info about it. Please remember that the map is not going to be visible in the post until you send the shortcode to the editor.
| Variable name | Description | Default | Acceptable values |
|---|---|---|---|
| width | Map canvas width. | 100% | Any acceptable CSS value, ie: 200px, 300em, 60%. If you want the map to be responsive keep it on 100%. |
| height | Map canvas height. | 400px | Any acceptable CSS value, ie: 200px, 300em, 60%. If a percentage value is used the container has to have a defined height. |
| zoom | Map zoom level. | 14 | 0 - 21. If autofit option is enabled zoom level is ignored. |
| autofit | Automatically adjusts zoom level and map center to make all pins visible on the map. | 0 | 0, 1 |
| type | Usual map types you can use when viewing Google Maps. | roadmap | roadmap, satellite, hybrid, terrain |
| fullscreen | Adds the fullscreen toggle button in the top-right corner of the map. | 0 | 0, 1 |
| color | Paints the whole map in defined color (basically ads hue). It partially overrides the skin option. | none | CSS RGB color notation - #RRGGBB |
| skin | Predefined map color scheme that completely transforms the map appearance. | none | default, apple, blue, bright, gowalla, gray, gray2, light, mapbox, pale, paper |
| traffic | Adds the traffic layer to the map. Please note that certain layers are not available on all locations. | 0 | 0, 1 |
| transit | Adds the transit layer to the map. Please note that certain layers are not available on all locations. | 0 | 0, 1 |
| weather | Adds the weather layer to the map. Please note that certain layers are not available on all locations. | 0 | 0, 1 |
| clouds | Adds the clouds layer to the map. Please note that certain layers are not available on all locations. | 0 | 0, 1 |
| bicycle | Adds the bicycle layer to the map. Please note that certain layers are not available on all locations. | 0 | 0, 1 |
| disable_scrollwheel | If enabled mouse wheel is disabled on the map. | 0 | 0, 1 |
| lock_map | Removes all map controls and completely locks it disabling zoom, pan, mouse wheel and mouse clicking. Great for use on mobile sites. | 0 | 0, 1 |
| post_id | If you're using custom field values in a widget or want to force another post ID different from the post you're currently in then set this option. | current post/page ID | int; valid post ID |
| debug | Displays various variables used in the process of map building. | 0 | 0, 1 |
| Variable name | Description | Default | Acceptable values |
| Variable name | Description | Default | Acceptable values |
|---|---|---|---|
| address | Pin address. You can enter the address via this variable or between the [pin][/pin] tags). lat, lng coordinates are also supported. |
none | Any address in the world that can be understood by Google Geocoding API. |
| center | Centers map over the pin. If map's autofit option is enabled this is ignored. By default first pin is used to center. | 0 | 0, 1 |
| bounce | Bounces (animates) map pin. | 0 | 0, 1 |
| icon | Icon/marker for pin. | default (Google's red pin) | Predefined pins: blue, blue2, blue3, red, red2, yellow, yellow2, green, green2, pink, purple, orange, grey, black, white, house, shop, chat, flag, star, food, nuclear, none, default. You can also enter the full URL to any image (size about 35*35px). |
| tooltip | Small, text-only tooltip shown when mouse hovers over pin. | pin address | Any text. |
| description | Large bubble/popup available on pin click. If you want to style it, target it with "gmp_infowindow" class. Only one description can be open at a time. | none | Any text or HTML. If you put in just the ID of a page/post then its content will be shown in the description. |
| show_description | Open description bubble immediately after map is loaded. Only one pin at a time can have the description open. | 0 | 0, 1 |
| directions | Adds directions form (to and from pin's address) into description bubble. | 0 | 0, 1 |
| Variable name | Description | Default | Acceptable values |
If you want to place a large amount of text in the pin description the easiest way to do it is to create a new post/page with that content and put the page ID as the only content of the pin description. Example:
[map] [pin description="485"]New York, USA[/pin] [/map]
You can still use the "directions" parameter to add directions form to that content. Easiest way to find out a page's ID is to edit it and then look into the address bar. The ID will be visible after "post=" text.
Instead of the usual parameter="value" syntax inside the shortcode use parameter="$custom_field_name" where custom_field_name is the custom field name in the current post/page/custom post type.
The only thing to remember is: place the dollar sign ($) in front of the custom field name. Example:
[map] [pin]$address-street $address-city $address-country[/pin] [/map]
The post ID will be auto-detected, but if needed, enter it manually via "post_id" parameter (see section above for details). If you want to use the dollar sign as a literal character just place to dollars - $$.
In order to work properly plugin requires wp_footer() function call in theme footer.php file. If you don't have that function call most plugins wont work and it means your theme is really poorly coded.
If your theme doesn't have that code place this code just above the </body> tag:
<?php wp_footer(); ?>
Try disabling the "include jQuery" option in settings.
If another plugin is using the [map] or [pin] shortcode you have to either disable that plugin or change the shortcode 5sec Google Maps Pro uses. Simply open Settings -> 5sec Google Maps Pro and change shortcode names.
Theme's CSS is applied to the description/bubble and thus doesn't look like you want it to. Use the "gmp_infowindow" class to apply and CSS rules you need for the description.
Enable "apply CSS fix" option in plugin's settings.
Google didn't understand your address. Try writing it in more detail. Don't forget the city and country name.
Sure! Use the map builder or read about the syntax in this document.
Yes, as many as you like!
Google Maps API is probably down. This happens rarely and lasts only for a couple of minutes. Be patient for a while.
No, you can define them in any order you like.
Depending on the JS code you use for tabs Google Maps may not display correctly, more so if they are placed on a tab that's initially hidden. Disable the auto-load setting for map and initialize them manually. See setting section in this document for details.
5sec Google Maps Pro uses the following external assets:
Once again, thank you so much for purchasing this premium WordPress plugin. As stated at the beginning, we'd be glad to help you if you have any questions relating to this plugin. We'll do our best to assist. If you have a more general question related to plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
