Skip Navigation

Maps Shortcodes

toolset-maps-distance-conditional-display

Description

Shows or hides its content based on the distance of the current visitor from the given point.
There are a few things that must be taken into consideration:

  • visitors might choose not to share their location
  • location can be imprecise, especially on devices that have no GPS
  • no security should be based on this as there is no guarantee that the location that the browser sends is correct in any way
  • this shortcode needs to be enclosed inside wpw-geolocation shortcode.
Arguments
  • location. Mandatory. Address or latitude and longitude coordinates of the fixed location that visitors location is compared to.

  • distance. Mandatory. Distance from visitor's location.

  • unit. Mandatory. Unit in which the distance is set. Can be km or mi.

  • display. Mandatory. Show if the visitor is inside or outside of the given radius.

Output

A map on the frontend.

More Usage examples

Example
[wpv-geolocation]
[toolset-maps-distance-conditional-display location='Berlin' distance='25']Test content for visitors inside of 25 km from Berlin.[/toolset-maps-distance-conditional-display]
[/wpv-geolocation]

toolset-maps-distance-value

Description

Display the distance between two locations.

Arguments
  • origin_source. Optional. The source of origin location. Source can be:

    • A specific address
    • The location of the current visitor. If you are using this argument, the shortcode needs to be enclosed inside wpw-geolocation shortcode.
    • URL parameter (can be used with custom distance filter)
    • A pair of latitude and longitude coordinates
  • location. Mandatory. Address or latitude and longitude pair for origin location.

  • url_param. Optional. URL parameter name to get origin location from.

  • target_source. Mandatory. The source of the target location. Source can be:

    • Post field storing an address
    • Taxonomy field storing an address
    • User field storing an address
  • postmeta. Optional. Address field coming from the post for target location.

  • postmeta_id. Optional. ID of a post address field.

  • usermeta. Optional. address field provided by a user.

  • usermeta_id. ID of a user address field.

  • termmeta. address field coming from taxonomy term.

  • termmeta_id. ID of a term address field.

  • decimals. A number of decimal places shown in the resulting number.

  • unit. Distance unit.

Output

More Usage examples

Example
[toolset-maps-distance-value location='Berlin, Germany' postmeta='wpcf-address' postmeta_id='986']


[wpv-geolocation]
[toolset-maps-distance-value origin_source='visitor_location' target_source='termmeta' termmeta='wpcf-term-address' termmeta_id='4']
[/wpv-geolocation]

wpv-geolocation

Description

This shortcode will stop processing of everything that is placed inside it. Then it will ask the visitor for location, save it so that it is available to the backend and then reload the page. This shortcode must be used whenever geolocation feature is required.

Arguments
  • message_when_missing. Optional. A message that will be displayed to the user.

Output

More Usage examples

Example
[wpv-geolocation message_when_missing="We need your location to show this content"]
    // Everything inside will only render when the location is saved and will have that location available on backend
[/wpv-geolocation]
[wpv-geolocation]
[toolset-maps-distance-value origin_source='visitor_location' postmeta='wpcf-address']
[/wpv-geolocation]

wpv-map-marker

Description

Adds a marker on a map.

Arguments
  • map_id. Mandatory. The unique ID for the map where this marker will be rendered. Must be a string.

  • marker_id. Mandatory. The unique ID for this marker. Must be a string.

  • marker_title. Optional, defaults to empty. When empty, and the marker comes from a meta field, it will automatically be populated with the post title, term name or user nicename. Shown when you hover over a marker.

  • id. Optional, defaults to empty. The ID of the object used to get the address meta field value for this marker.

  • marker_field. Optional. Source of the marker location when displaying a marker from an address postmeta field.

  • marker_termmeta. Optional. Source of the marker location when displaying a marker from an address termmeta field. When used on a View listing taxonomy terms, it uses the termmeta field from the current term in the View loop. Otherwise, you need to pass a value with the id attribute.

  • marker_usermeta. Optional. Source of the marker location when displaying a marker from an address usermeta field. When used on a View listing users, uses the usermeta field from the current user in the View loop. Otherwise, you need to pass a value using the id attribute.

  • address. Optional. Defaults to empty. Another optional source of the marker address, allows to display a marker given a fixed, known address.

  • lat and lon. Optional, both default to empty. Another optional source of the marker location, allows to display a marker given its latitude and longitude coordinates. Both values need to be passed.

  • marker_icon. Optional, defaults to empty, which means using the default Google Maps icons for markers, or the one set for the whole map. Can be a complete URL pointing to an image to use as marker image.

  • marker_icon_hover. Optional, defaults to empty, which means using the default Google Maps icons for markers or the one set for the whole map. Can be a complete URL pointing to an image to use as marker image when hovering over it.

Output

The marker of a map.

More Usage examples

Example
[wpv-map-marker map_id="my-map" marker_id="my-marker" marker_title="This is a marker" marker_field="wpcf-my-marker"]This is the content of the marker popup.[/wpv-map-marker]

wpv-map-render

Description

Renders a map.

Arguments
  • map_id. Mandatory. The unique ID for the map to be rendered. Must me a string.

  • draggable. Optional, defaults to on. Can be on or off. Defines whether you can move the map view by dragging it.

  • marker_icon_hover. Optional, defaults to empty, which means using the default Google Maps icons for markers. Can be a complete URL pointing to an image to use as a marker for all markers on this map, when hovering over them.

  • marker_icon. Optional, defaults to empty, which means using the default Google Maps icons for markers. Can be a complete URL pointing to an image to use as a marker for all markers on this map.

  • background_color. Optional, defaults to empty. The hexadecimal color to use for the map background, visible when loading tiles. Must be prefixed with the right # character.

  • street_view_control. Optional, defaults to on, can be on or off. It defines whether the map should offer controls for Street View.

  • zoom_control. Optional, defaults to on, can be on or off . It defines whether the map should offer zooming controls.

  • full_screen_control. Optional, defaults to on, can be on or off. It defines whether the map should offer control to toggle the full-screen view.

  • map_type_control. Optional, defaults to on, can be on or off. It defines whether the map should display and offer map types control (terrain, roadmap, satellite, etc).

  • double_click_zoom. Optional, defaults to on, can be on or off. It defines whether double-clicking on a map should zoom it in.

  • scrollwheel. Optional, defaults to on. Can be on or off. It defines whether you can zoom the map using the mouse scrollwheel.

  • cluster_min_size. Optional, defaults to 2. Minimum number of markers that can get wrapped into a cluster.

  • map_width. Optional. Defaults to 100% . Can take just a number, which will be evaluated as number of pixels, or a number with an unit, like 80% , 300px or 50em.

  • cluster_click_zoom. Optional, defaults to on , can be on or off. This attribute sets whether clicking on a cluster should zoom it. By design, it sets the fitbounds value of the map based on the markers contained in that cluster. Sometimes, this attribute needs to be used together with the cluster_max_zoom attribute to dissolve a cluster when markers are too close.

  • cluster_max_zoom. Optional, defaults to empty. When cluster is set to on , this attribute sets the minimum zoom level that dissolves clusters into individual markers again.

  • cluster_grid_size. Optional. Defaults to 60 (pixels). When cluster is set to on, this attribute sets the minimum distance in pixels between two markers to join them into the same cluster.

  • cluster. Optional, defaults to off . Can be on or off . When set to on, markers close enough based on some rules will be rendered as a cluster.

  • single_center. Optional, defaults to on . Can be on or off. In cases where fitbounds is set to off, you set specific map center options, and the map has only one marker, you can use this switch to override the centering settings and enforce centering on the sole marker.

  • single_zoom. Optional. Defaults to 14. When displaying a map with a single marker, using fitbounds set to on would zoom on the single marker at the maximum zoom level. This attribute overrides that behavior.

  • general_center_lat and general_center_lon. Optional, coordinates for the map center when fitbounds is set to off. It takes valid latitude and longitude values: a latitude between -85 and 85, excluded, and a longitude between -180 and 180, included. Those numbers come from rstrictions from the Google Maps API.

  • general_zoom. Optional, defaults to 5. When fitbounds is set to off, this one sets the zoom level of the map. The range of valid zoom levels for a Google Map depends on the detail of each position (in this case, the center), and the kind of map (terrain, traffic, etc). It goes from 0 (maximum zoom out) to a safe value of around 18, although on populated areas it can get up to 22.

  • fitbounds. Optional, defaults to on. Can be on or off. When on, the map zoom and center will be calculated to show all the markers at once in the closest possible view.

  • map_height. Optional, defaults to 250 pixels . Again, can be just a number (evaluated as pixels) or a number with a unit.

  • map_type. Optional, defaults to "roadmap". Can be "roadmap", "satellite", "hybrid", or "terrain".

Output

A map on the frontend.

More Usage examples

Example
[wpv-geolocation]wpv-map-render map_id="my-map" map_width="400px" map_height="200px" fitbounds="off" general_zoom="6" single_zoom="15" cluster="on"]

Extra Elements

There are some elements that are not actual shortcodes, but also provide interaction with maps.

Map focus on marker

Description

This is a clickable HTML element that focus on a marker of a map.

Arguments
  • A class for adding custom CSS classes. Note that the js-wpv-addon-maps-focus-map class is added automatically and is mandatory.

  • A data attribute data-map holding the value of the map ID to focus on.

  • A data attribute data-marker holding the value of the marker ID to focus on. In order to focus on several markers on a map you must build a dynamic data-marker. You can use 493648-marker-id that corresponds to the marker_id attribute.

Output

A clickable element that focus on a marker of a map.

More Usage examples

Example

<!-- Example 1 -->
<a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-hover-map-3-marker-mark js-toolset-maps-open-infowindow-map-3-marker-mark" data-map="map-8" data-marker="[wpv-post-id]-marker-id">Focus</a>

<!-- Example 2 -->
<button class="js-wpv-addon-maps-focus-map" data-map="map-8" data-marker="[wpv-post-id]-marker-id">Focus on marker</button>

Map reload

Description

This is a clickable HTML element that reloads a map.

Arguments
  • A class for adding custom CSS classes. Note that the js-wpv-addon-maps-reload-map class is added automatically and is mandatory.

  • A data attribute data-map holding the value of the map ID to reload.

Output

A clickable element that reloads a map.

More Usage examples

Example

<button class="js-wpv-addon-maps-reload-map" data-map="my-map">Reload the map</button>

Map zoom restore

Description

This is a clickable HTML element that restores the zoom of a map.

Arguments
  • A class for adding custom CSS classes. Note that the js-wpv-addon-maps-restore-map class is added automatically and is mandatory.

  • A data attribute data-map holding the value of the map ID to restore the zoom.

Output

A clickable element that restores the zoom of a map.

More Usage examples

Example
<button class="js-wpv-addon-maps-restore-map" data-map="my-map">Restore zoom of the map</button>