The plugin provide several shortcodes that allows displaying different maps. These are all available shortcodes in the plugin.
Section: Shortcode
Shortcode: [cspm_frontend_form]
This shortcode will display a form that you can use to add locations from the frontend of your website. This was introduced in version 3 as a replacement of the v2 shortcode [progress_map_add_location_form].
The shortcode [cspm_frontend_form] supports the following parameters:
map_idpost_idpost_typeembedcenter_atzoomwidthheightmap_styleinitial_map_stylewindow_resize
A string name that represents the unique ID of the map.
- Do not use the string name
frontend_form_map! That name is reserved for the main map of the form. - If the attribute
map_idwas not defined, the plugin will call the default ID of the form’s map. - If the attribute
map_idwas not defined and two instances (maps) were called in the same page, the plugin will confuse between them and none of the instances will work.
If you want to save the coordinates using PHP, this is the code you need to use to save your locations:
if(class_exists('CspmFrontendForm') && isset($_POST[CSPM_LATITUDE_FIELD], $_POST[CSPM_LONGITUDE_FIELD])){
$CspmFrontendForm = CspmFrontendForm::this();
$CspmFrontendForm->cspm_save_frontend_location(array(
'post_id' => THE_POST_ID,
'latitude' => esc_attr($_POST[CSPM_LATITUDE_FIELD]),
'longitude' => esc_attr($_POST[CSPM_LONGITUDE_FIELD]),
'post_type' => THE_POST_TYPE_NAME,
));
}
The post ID to which you want to add coordinates. If not used, the plugin will use the ID of the last inserted post but please note that this is not 100% guaranteed.
Example: [cspm_frontend_form post_id="150"]
The post type name of the post to which you want to add the coordinates. When not used, the plugin will use your “Main content type”.
Example: [cspm_frontend_form post_type="post"]
Possible values areyes, no. If you want to embed the frontend form inside another form, use this shortcode attribute and use the option yes. This will also hide the “Add location” button of the form.
Example: [cspm_frontend_form embed="yes"]
Override the default center point of the map by providing other coordinates (latitude & longitude).
Example 1: [cspm_frontend_form center_at="51.510879,-0.117813"]
The width of the map in pixels.
Example: [cspm_frontend_form width="500px"]
The height of the map in pixels.
Example: [cspm_frontend_form height="500px"]
Define the zoom of the map (from 0 to 19).
Example: [cspm_frontend_form zoom="13"]
The skin of the map. To get the style name, follow these steps:
- Click on the menu “Progress Map”. Wait for the page to load!
- Click on the menu “Default Map style settings”
- Click the link “Demo” next to the style you like. A new page/window will open, the URL of that page/window holds the style name as the last attribute. So if the URL looks like
http://snazzymaps.com/style/42/apple-maps-esque, the style name will beapple-maps-esque.
Example: [cspm_frontend_form map_style="apple-maps-esque"]
The initial style of the map. Possible values are ROADMAP, SATELLITE, TERRAIN, HYBRID, custom_style.
Example: [cspm_frontend_form initial_map_style="TERRAIN"]
Shortcode: [cspm_contact_map]
This shortcode will display a map of a given location by providing Latitude & Longitude coordinates. This was introduced in version 3 as a replacement of the v2 shortcode [cs_static_marker_map].
The shortcode [cspm_contact_map] supports the following parameters:
The coordinates (Latitude, Longitude) of the location to display on the map.
Example: [cspm_contact_map latlng="51.53096,-0.121064"]
A string name that represent the unique ID of the map. This attribute is only required if you want to display multiple maps on the same page.
* This attribute is required only if you want to use multiple maps on the same page.
Example 1: [cspm_contact_map]
Example 2: [cspm_contact_map map_id="map_1"]
The width of the map in pixels or in %.
Example 1: [cspm_contact_map width="100%"]
Example 2: [cspm_contact_map width="500px"]
The height of the map in pixels or in %
Example 1: [cspm_contact_map height="100%"]
Example 2: [cspm_contact_map height="500px"]
The URL of the custom marker icon/image. If not used, the plugin will use the default marker icon!
Example: [cspm_contact_map marker_img="www.yourwebiste.com/marker_img.png"]
Define the zoom of the map (from 0 to 19).
Example: [cspm_contact_map zoom="13"]
The skin of the map. To get the style name, follow these steps:
- Click on the menu “Progress Map”. Wait for the page to load!
- Click on the menu “Default Map style settings”
- Click the link “Demo” next to the style you like. A new page/window will open, the URL of that page/window holds the style name as the last attribute. So if the URL looks like
http://snazzymaps.com/style/42/apple-maps-esque, the style name will beapple-maps-esque.
Example: [cspm_contact_map map_style="apple-maps-esque"]
The initial style of the map. Possible values are ROADMAP, SATELLITE, TERRAIN, HYBRID, custom_style.
Example: [cspm_contact_map initial_map_style="TERRAIN"]
Detect browser window resize and recenter the map. Possible values are yes and no.
Example: [cspm_contact_map window_resize="no"]
Shortcode: [cspm_streetview_map]
This shortcode will display the StreetView map of the current post viewed by the visitor. It detects the current post and display its position on the map.
The shortcode [cspm_streetview_map] supports the following parameters:
One or more post ID to display on the map. If no post ID is available, the map will use the ID of the current post/page where you use this shortcode.
Example 1: [cspm_streetview_map]
Example 2: [cspm_streetview_map post_ids="1"]
The center point of the map. Enter the Latitude & Longitude of the center point or enter the ID of the post on which the map will be centered.
Example 1: [cspm_streetview_map center_at="51.510879,-0.117813"]
Example 2: [cspm_streetview_map post_ids="1,2,3,4,5" center_at="1"]
Define the zoom of the map (from 0 to 19).
Example: [cspm_streetview_map zoom="13"]
The width of the map in pixels or in %.
Example 1: [cspm_streetview_map width="100%"]
Example 2: [cspm_streetview_map width="500px"]
The height of the map in pixels or in %
Example 1: [cspm_streetview_map height="100%"]
Example 2: [cspm_streetview_map height="500px"]
Whether to hide the map when the post to display on it doesn’t have coordinates or to show an empty map. Possible values are yes or no. Defaults to yes.
Example: [cspm_streetview_map hide_empty="no"]
Shortcode: [cspm_static_map]
This shortcode will display a static map (like image) of the current post viewed by the visitor. It’ll automatically detect the current post and display its position on the map. This was introduced in version 3 as a replacement of the v2 shortcode [codespacing_static_map].
The settings of this map can be set from the menus (Progress Map / Default map settings), (Progress Map / Default map style settings) & (Progress Map / Default infobox settings)!
The shortcode [cspm_static_map] supports the following parameters:
post_idscenter_atzoomshow_overlaywidthheightshow_secondarymap_styleinitial_map_styleinfobox_typeinfobox_link_targethide_emptywindow_resize
One or more post ID to display on the map. If no post ID is available, the map will use the ID of the current post/page where you use this shortcode.
Example 1: [cspm_static_map]
Example 2: [cspm_static_map post_ids="1"]
Example 3: [cspm_static_map post_ids="1,2,3,4,5"]
The center point of the map. Enter the Latitude & Longitude of the center point or enter the ID of the post on which the map will be centered.
If multiple post ids were passed to the attribute post_ids and center_at is not defined, the plugin will center the map on the position of the first post in the attribute post_ids.
Example 1: [cspm_static_map center_at="51.510879,-0.117813"]
Example 2: [cspm_static_map post_ids="1,2,3,4,5" center_at="1"]
Define the zoom of the map (from 0 to 19).
Example: [cspm_static_map zoom="13"]
Show/Hide the marker overlays (infoboxes). Possible values are yes (show), no (hide).
Example: [cspm_static_map show_overlay="no"]
The width of the map in pixels or in %.
Example 1: [cspm_static_map width="100%"]
Example 2: [cspm_static_map width="500px"]
The height of the map in pixels or in %
Example 1: [cspm_static_map height="100%"]
Example 2: [cspm_static_map height="500px"]
Show/Hide the secondary markers added to a post. Possible values ar, yes or no. Defaults to yes.
Example: [cspm_static_map show_secondary="yes"]
The skin of the map. To get the style name, follow these steps:
- Click on the menu “Progress Map”. Wait for the page to load!
- Click on the menu “Default Map style settings”
- Click the link “Demo” next to the style you like. A new page/window will open, the URL of that page/window holds the style name as the last attribute. So if the URL looks like
http://snazzymaps.com/style/42/apple-maps-esque, the style name will beapple-maps-esque.
Example: [cspm_static_map map_style="apple-maps-esque"]
The initial style of the map. Possible values are ROADMAP, SATELLITE, TERRAIN, HYBRID, custom_style.
Example: [cspm_static_map initial_map_style="TERRAIN"]
Override the default infobox type. Possible values are, square_bubble, rounded_bubble, cspm_type1, cspm_type2, cspm_type3 and cspm_type4.
Example: [cspm_static_map infobox_type="cspm_type1"]
Detect browser window resize and recenter the map. Possible values are yes and no.
Example: [cspm_static_map window_resize="no"]
Whether to hide the map when the post to display on it doesn’t have coordinates or to show an empty map. Possible values are yes or no. Defaults to yes.
Example: [cspm_static_map hide_empty="no"]
Specify where to open the infobox link. Possible values are same_window, new_window or disable.
Example: [cspm_static_map infobox_link_target="disable"]
Shortcode: [cspm_light_map]
This shortcode will display the map of the current post viewed by the visitor. It’ll automatically detect the current post and display its position on the map. This was introduced in version 3 as a replacement of the v2 shortcode [codespacing_light_map].
The settings of this map can be set from the menus (Progress Map / Default map settings), (Progress Map / Default map style settings) & (Progress Map / Default infobox settings)!
The shortcode [cspm_light_map] supports the following parameters:
post_idscenter_atzoomshow_overlaywidthheightshow_secondarymap_styleinitial_map_styleinfobox_typeinfobox_link_targethide_emptywindow_resize
One or more post ID to display on the map. If no post ID is available, the map will use the ID of the current post/page where you use this shortcode.
Example 1: [cspm_light_map]
Example 2: [cspm_light_map post_ids="1"]
Example 3: [cspm_light_map post_ids="1,2,3,4,5"]
The center point of the map. Enter the Latitude & Longitude of the center point or enter the ID of the post on which the map will be centered.
If multiple post ids were passed to the attribute post_ids and center_at is not defined, the plugin will center the map on the position of the first post in the attribute post_ids.
Example 1: [cspm_light_map center_at="51.510879,-0.117813"]
Example 2: [cspm_light_map post_ids="1,2,3,4,5" center_at="1"]
Define the zoom of the map (from 0 to 19).
Example: [cspm_light_map zoom="13"]
Show/Hide the marker overlays (infoboxes). Possible values are yes (show), no (hide).
Example: [cspm_light_map show_overlay="no"]
The width of the map in pixels or in %.
Example 1: [cspm_light_map width="100%"]
Example 2: [cspm_light_map width="500px"]
The height of the map in pixels or in %
Example 1: [cspm_light_map height="100%"]
Example 2: [cspm_light_map height="500px"]
Show/Hide the secondary markers added to a post. Possible values ar, yes or no. Defaults to yes.
Example: [cspm_light_map show_secondary="yes"]
The skin of the map. To get the style name, follow these steps:
- Click on the menu “Progress Map”. Wait for the page to load!
- Click on the menu “Default Map style settings”
- Click the link “Demo” next to the style you like. A new page/window will open, the URL of that page/window holds the style name as the last attribute. So if the URL looks like
http://snazzymaps.com/style/42/apple-maps-esque, the style name will beapple-maps-esque.
Example: [cspm_light_map map_style="apple-maps-esque"]
The initial style of the map. Possible values are ROADMAP, SATELLITE, TERRAIN, HYBRID, custom_style.
Example: [cspm_light_map initial_map_style="TERRAIN"]
Override the default infobox type. Possible values are, square_bubble, rounded_bubble, cspm_type1, cspm_type2, cspm_type3 and cspm_type4.
Example: [cspm_light_map infobox_type="cspm_type1"]
Detect browser window resize and recenter the map. Possible values are yes and no.
Example: [cspm_light_map window_resize="no"]
Whether to hide the map when the post to display on it doesn’t have coordinates or to show an empty map. Possible values are yes or no. Defaults to yes.
Example: [cspm_light_map hide_empty="no"]
Specify where to open the infobox link. Possible values are same_window, new_window or disable.
Example: [cspm_light_map infobox_link_target="disable"]
Shortcode: [cspm_route_map]
This shortcode will connect multiple posts with a route.
When used with less than 23 post, the map will use the first post in the attribute post_ids as the route starting point and will use the last post as the end of the route. The other posts in between will be used as waypoints. In this case, the map will attempt to re-order the supplied intermediate waypoints to minimize overall cost of the route.
Because of Google Maps usage limits and when supplying more that 23 posts, the map will display the route between a post and the one that follows it respecting the order in the shortcode attribute post_ids. The overall cost of the route will not be minimized!
The settings of this map can be set from the menus (Progress Map / Default map settings), (Progress Map / Default map style settings) & (Progress Map / Default infobox settings)!
The shortcode [cspm_route_map] was introduced in version 3.6 and it supports the following parameters:
post_idstravel_modecenter_atzoomshow_overlaywidthheightshow_secondarymap_styleinitial_map_styleinfobox_typeinfobox_link_targetroute_colorroute_weightroute_opacityhide_emptywindow_resize
At least two post IDs.
Example 1: [cspm_route_map post_ids="1,5"]
Example 2: [cspm_route_map post_ids="1,2,3,4,5"]
Type of routing requested. Possible values are DRIVING, BICYCLING, TRANSIT & WALKING. Default to DRIVING.
Example: [cspm_route_map post_ids="1,5" travel_mode="BICYCLING"]
The center point of the map. Enter the Latitude & Longitude of the center point or enter the ID of the post on which the map will be centered.
If multiple post ids were passed to the attribute post_ids and center_at is not defined, the plugin will center the map on the position of the first post in the attribute post_ids.
Example 1: [cspm_route_map center_at="51.510879,-0.117813"]
Example 2: [cspm_route_map post_ids="1,2,3,4,5" center_at="1"]
Define the zoom of the map (from 0 to 19).
Example: [cspm_route_map zoom="13"]
Show/Hide the marker overlays (infoboxes). Possible values are yes (show) and no (hide).
Example: [cspm_route_map show_overlay="no"]
The width of the map in pixels or in %.
Example 1: [cspm_route_map width="100%"]
Example 2: [cspm_route_map width="500px"]
The height of the map in pixels or in %.
Example 1: [cspm_route_map height="100%"]
Example 2: [cspm_route_map height="500px"]
Show/Hide the secondary markers added to a post. Possible values ar, yes or no. Defaults to yes.
Example: [cspm_route_map show_secondary="yes"]
The skin of the map. To get the style name, follow these steps:
- Click on the menu “Progress Map”. Wait for the page to load!
- Click on the menu “Default Map style settings”
- Click the link “Demo” next to the style you like. A new page/window will open, the URL of that page/window holds the style name as the last attribute. So if the URL looks like
http://snazzymaps.com/style/42/apple-maps-esque, the style name will beapple-maps-esque.
Example: [cspm_route_map map_style="apple-maps-esque"]
The initial style of the map. Possible values are ROADMAP, SATELLITE, TERRAIN, HYBRID, custom_style.
Example: [cspm_route_map initial_map_style="TERRAIN"]
Override the default infobox type. Possible values are, square_bubble, rounded_bubble, cspm_type1, cspm_type2, cspm_type3 and cspm_type4.
Example: [cspm_route_map infobox_type="cspm_type1"]
Detect browser window resize and recenter the map. Possible values are yes and no.
Example: [cspm_route_map window_resize="no"]
Whether to hide the map when the post to display on it doesn’t have coordinates or to show an empty map. Possible values are yes or no. Defaults to yes.
Example: [cspm_route_map hide_empty="no"]
Specify where to open the infobox link. Possible values are same_window, new_window, popup or disable.
Example: [cspm_route_map infobox_link_target="disable"]
Provide a hex color to change the route color (e.g. “#ff0000”).
Example: [cspm_route_map route_color="#ff0000"]
Change the weight of the route.
Example: [cspm_route_map route_weight="10"]
change the opacity of the route. Possible values are “0”, “0.1”, “0.2”, …, “0.9” and “1”.
Example: [cspm_route_map route_opacity="0.8"]
Shortcode: [cspm_main_map]
This is the main shortcode of the plugin, it’ll display all your locations on a map and a carousel. This was introduced in version 3 as a replacement of the v2 shortcode [codespacing_progress_map]
The shortcode [cspm_main_map] supports the following attributes:
The ID of the map to display. This attribute is required! When not provided, the plugin will display the message “Map not available!”. More infos about the error can be found on the browser console.
Example: [cspm_main_map id="55"]
The center point of the map. Enter the Latitude & Longitude of the center point or enter the ID of the post on which the map will be centered.
Only “Decimal” format is allowed. e.g. 55.7557860,-37.6176330
All underneath formats are not supported:
- Degrees minutes seconds:
40° 26′ 46″ N 79° 58′ 56″ W - Degrees decimal minutes:
40° 26.767′ N 79° 58.933′ W - Decimal degrees:
40.446° N 79.982° W
Example 1: [cspm_main_map id="55" center_at="51.510879,-0.117813"]
Example 2: [cspm_main_map id="55" center_at="109"]
One or more post ids to display on the map. This attribute is the equivalent of the field “Query settings => Posts to retrieve”.
If no post ID available, the plugin will call the post IDs based on the map query settings. When available, the plugin will ignore the other map query settings like post_type, post_status … etc
Example 1: [cspm_main_map id="55" post_ids="1"]
Example 2: [cspm_main_map id="55" post_ids="1,2,3,4,5"]
Detect browser window resize and recenter the map. Possible values are yes and no.
Example: [cspm_main_map id="55" window_resize="yes"]