The shortcode [cspm_directions_map] will allow you to display directions between a given starting point and one or more locations. The shortcode is ready to be used anywhere in your website. When used inside the single post page, the shortcode will automatically use the current post as your destination. When used outside of the single post page, the shortcode requires providing the ID of the post. The shortcode also requires a starting point which can be provided as an address or latLng coordinates.
The shortcode [cspm_directions_map] supports the following parameters:
start_latlngstart_addresspost_idstravel_modeunit_systemroute_colorroute_weightroute_opacitymarker_typemarker_urlmarker_widthmarker_heightmarker_draggableshow_overlaywidthheightshow_secondarymap_styleinitial_map_styleinfobox_typeinfobox_link_targethide_emptywindow_resize
The Latitude & Longitude of the starting point.
Example 1: [cspm_directions_map start_latlng="51.510879,-0.117813"]
The address of the starting point. If the above attribute start_latlng was not provided, the map will use the address as the starting point, otherwise, the starting point’s latLong coordinates will be used instead.
Example 1: [cspm_directions_map start_address="London, UK"]
One or more post ID to use as distinations. If no post ID is available, the map will use the ID of the current post/page where you use this shortcode. The provided posts will be considered as destination!
Example 1: [cspm_directions_map start_latlng="51.510879,-0.117813" post_ids="1"]
Example 2: [cspm_directions_map start_address="London, UK" post_ids="1"]
Example 3: [cspm_directions_map start_latlng="51.510879,-0.117813" post_ids="1,2,3,4,5"]
Example 4: [cspm_directions_map start_address="London, UK" post_ids="1,2,3,4,5"]
The preferred travel mode. Possible travel modes are “DRIVING”, “TRANSIT”, “BICYCLING” & “WALKING”. Defaults to “DRIVING”.
Example 1: [cspm_directions_map travel_mode="TRANSIT"]
The preferred unit system to use when displaying distance. Possible values are “METRIC” & “IMPERIAL”. Defaults to “METRIC”.
Example 1: [cspm_directions_map unit_system="IMPERIAL"]
The preferred color of the route.
Example 1: [cspm_directions_map route_color="#008fed"]
The preferred weight or stroke width of the route (in pixels).
Example 1: [cspm_directions_map route_weight="5"]
The preferred route opacity. from 0 to 1
Example 1: [cspm_directions_map route_opacity="0.5"]
The preferred marker type. Possible marker types are “default” & “customize”. When using the default type, the map will use Google Maps red marker. When using the customized type, you should provide the URL of the your custom marker icon using the shortcode attribute below marker_url. Defaults to “default”.
Example 1: [cspm_directions_map marker_type="customize"]
The URL of your custom marker icon. Works only when the shortcode attribute above marker_type is set to “customize”.
Example 1: [cspm_directions_map marker_type="customize" marker_url="THE_URL_OF_THE_MARKER_ICON"]
The preferred width (in pixels) of your custom marker icon. Works only when the shortcode attribute marker_type is set to “customize”.
Example 1: [cspm_directions_map marker_type="customize" marker_url="THE_URL_OF_THE_MARKER_ICON" marker_width="30"]
The preferred width (in pixels) of your custom marker icon. Works only when the shortcode attribute marker_type is set to “customize”.
Example 1: [cspm_directions_map marker_type="customize" marker_url="THE_URL_OF_THE_MARKER_ICON" marker_height="32"]
Whether or not to allow marker dragging. Activating this option will allow the users to change the starting point by dragging the marker to another location/position. Possible values are “yes” & “no”. Defaults to “no”.
Example 1: [cspm_directions_map marker_draggable="yes"]
Show/Hide the marker overlays (infoboxes). Possible values are yes (show), no (hide).
Example: [cspm_directions_map show_overlay="no"]
The width of the map in pixels or in %.
Example 1: [cspm_directions_map width="100%"]
Example 2: [cspm_directions_map width="500px"]
The height of the map in pixels or in %
Example 1: [cspm_directions_map height="100%"]
Example 2: [cspm_directions_map height="500px"]
Show/Hide the secondary markers added to a post. Possible values ar, yes or no. Defaults to yes.
Example: [cspm_directions_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_directions_map map_style="apple-maps-esque"]
The initial style of the map. Possible values are ROADMAP, SATELLITE, TERRAIN, HYBRID, custom_style.
Example: [cspm_directions_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_directions_map infobox_type="cspm_type1"]
Detect browser window resize and recenter the map. Possible values are yes and no.
Example: [cspm_directions_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_directions_map hide_empty="no"]
Specify where to open the infobox link. Possible values are same_window, new_window or disable.
Example: [cspm_directions_map infobox_link_target="disable"]