Maps Shortcodes
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:
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.
A map on the frontend.
More Usage examples
[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]
Display the distance between two locations.
origin_source
. Optional. The source of origin location. Source can be:
wpw-geolocation shortcode
.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:
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.
More Usage examples
[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]
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.
message_when_missing
. Optional. A message that will be displayed to the user.
More Usage examples
[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]
Adds a marker on a map.
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.
The marker of a map.
More Usage examples
[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]
Renders a map.
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".
A map on the frontend.
More Usage examples
[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"]
There are some elements that are not actual shortcodes, but also provide interaction with maps.
This is a clickable HTML element that focus on a marker of a map.
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.
A clickable element that focus on a marker of a map.
More Usage examples
<!-- 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>
This is a clickable HTML element that reloads a map.
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.
A clickable element that reloads a map.
More Usage examples
<button class="js-wpv-addon-maps-reload-map" data-map="my-map">Reload the map</button>
This is a clickable HTML element that restores the zoom of a map.
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.
A clickable element that restores the zoom of a map.
More Usage examples
<button class="js-wpv-addon-maps-restore-map" data-map="my-map">Restore zoom of the map</button>