[dmo-map]
Displays an interactive Google Map of one or more Places.
Syntax
[dmo-map id="myId" places="1,2" class="myClass1 myClass2" categories="cat1,cat2" features="feat1,feat2" tags="tag1,tag2" theme="classic" width="100%" height="400px" zoom="14" match="OR" marker-stroke-weight="1" marker-stroke-color="#ffffff" marker-stroke-opacity="1.0" marker-fill-color="#cc0000" marker-fill-opacity="1.0" marker-label-color="#ffffff" show-directions="false" show-google-link="true" show-post-thumbnail="true" marker-svg-path="M150 0 L75 200 L225 200 Z"]
This function does not require a closing tag, but one may be used if desired. Content between the opening and closing function tags is ignored.
Parameters
id
Default Value: An empty string.
Acceptable Values: A string representing a valid HTML id
attribute.
Sets the HTML id
attribute of the map container element to the value specified. Useful if you’d like to target this map with JavaScript. Be careful: id
attributes must be unique on the page. For CSS styling, it’s usually best to use the class parameter instead.
Example:
Adds the ID attribute ‘myID’ to the map container element:
[dmo-map id="myID"]
places
Default Value: When used within the loop, this value defaults to the current Post ID. When used outside the loop, this value defaults to an empty string.
Acceptable Values: Comma-separated integers representing one or more WordPress Post IDs that correspond to Place post types.
Adds a marker for each specified Place to the map. Useful if you want to create a multi-marker map without using Place Categories or Place Features. Also useful if you want to add a specific Place to a set of Place Categories or Place Features.
Examples:
Shows a map with a single Place corresponding to WordPress Post ID 294:
[dmo-map places="294"]
If you’re already on Post ID 294 and this function is being used within The Loop (i.e. on the page content) it’s not necessary to supply this parameter at all. You could simply use this to generate a map for Post ID 294:
[dmo-map]
Shows a map with several Places corresponding to WordPress Post IDs 113, 245, 247 and 315:
[dmo-map places="113,245,247,315"]
class
Default Value: An empty string.
Acceptable Values: A string representing one or more space-separated CSS classnames.
Appends the specified string to the contents of the HTML class
attribute of the map container element. To specify multiple CSS classnames, separate them with spaces just as you would with the HTML class
attribute.
Examples:
Appends the CSS class “my-class” to the map container element:
[dmo-map class="my-class"]
Appends the CSS classes “my-class” and “another-class” to the map container element (note the use of spaces to separate class names):
[dmo-map class="my-class another-class"]
categories
Default Value: An empty string.
Acceptable Values: One or more comma-separated strings representing slugs for Place Categories.
Adds Places belonging to the specified Place Categories to the map. Depending on the setting of the match parameter, matching Places can belong to any of the specified Place Categories, or must belong to all of the specified Place Categories.
Examples:
Display a map of French and Italian restaurants using their respective slugs:
[dmo-map categories="french,italian"]
Display a map of all hotels:
[dmo-map categories="hotel"]
features
Default Value: An empty string.
Acceptable Values: One or more comma-separated strings representing slugs for Place Features.
Adds Places belonging to the specified Place Features to the map. Depending on the setting of the match parameter, matching Places can have any of the specified Place Features, or must have all of the specified Place Features.
Examples:
Display a map of all Places with free parking:
[dmo-map features="free-parking"]
Display a map of all Places that are family-friendly and have free admission:
[dmo-map features="family-friendly,free-admission" match="AND"]
tags
Default Value: An empty string.
Acceptable Values: One or more comma-separated strings representing slugs for WordPress Tags.
Adds Places belonging to the specified Tags to the map. Depending on the setting of the match parameter, matching Places can have any of the specified Tags, or must have all of the specified Tags.
Examples:
Display a map of all Places that are participating in SummerFest 2017:
[dmo-map tags="summerfest-2017"]
Display a map of all Places that are hidden gems or local favorites:
[dmo-map tags="hidden-gems,local-favorites"]
theme
Default Value: This value defaults to the map theme that is set in Settings > DMOPress > Google Maps.
Acceptable Values: Click here for a list of available map themes.
Sets the style and color scheme of the map. It’s only necessary to set this parameter if you want to override the default map theme you’ve chosen in Settings > DMOPress > Google Maps.
Examples:
Display a map of the current Place using the Gotham map theme:
[dmo-map style="gotham"]
Display a map of all parks using the Nature map style:
[dmo-map categories="parks" style="nature"]
width
Default Value: 100%
Acceptable Values: Any string that is compatible with the CSS width property.
By default, the generated map takes the full width of its container. In some cases, you may want to set its width to a specific percentage (i.e. 50%) or absolute value (i.e. 400px). For advanced control of map style and layout, it’s preferable to set the class attribute (see above) and specify exactly what you need in your CSS stylesheet.
Examples:
Display a map and set it to 400 pixels wide:
[dmo-map width="400px"]
Display a map that is 50% of the width of its container:
[dmo-map width="50%"]
height
Default Value: 400px
Acceptable Values: Any string that is compatible with the CSS height property.
By default, the generated map takes the full height of its container. In some cases, you may want to set its height to a specific percentage (i.e. 50%) or absolute value (i.e. 400px). For advanced control of map style and layout, it’s preferable to set the class attribute (see above) and specify exactly what you need in your CSS stylesheet.
Examples:
Display a map and set it to 300 pixels in height:
[dmo-map height="300px"]
Display a map that is 50% of the height of its container:
[dmo-map height="50%"]
zoom
Default Value: 14
Acceptable Values: An integer 1 or greater, and less than or equal to 20.
For single Places only: sets the initial zoom level of the map when it is loaded. When loading a map with multiple Places, the zoom level of the map is determined automatically by the boundaries of all matching Places, and this parameter is ignored.
The following list shows the approximate level of detail you can expect to see at each zoom level:
1: World
5: Landmass / Continent
10: City
15: Streets
20: Buildings
Examples:
When showing a map of a single Place, show a substantial portion of the surrounding city:
[dmo-map zoom="11"]
When showing a map of a single Place, zoom in directly on the building and a handful of neighbours:
[dmo-map zoom="19"]
match
Default Value: OR
Acceptable Values: AND or OR
When deciding which of the supplied Place Categories, Place Features and Tags to include on a map, determines whether narrow matching or broad matching is used. Broad matching (OR) includes Places that match any of the supplied slugs, while narrow matching (AND) includes Places that match all of the supplied tags. If this parameter is not supplied, broad (OR) matching is used.
Examples:
To show all Places that deliver Indian food:
[dmo-map categories="indian" features="delivery" match="AND"]
To show all Places that serve Italian or French food::
[dmo-map categories="italian,french" match="OR"]
marker-stroke-weight
Default Value: 1
Acceptable Values: An integer 1 or greater
Sets the stroke weight of SVG markers on the map.
marker-stroke-color
Default Value: #ffffff
Acceptable Values: A hex value that is compatible with the CSS color property.
marker-stroke-opacity
Default Value: 1.0
Acceptable Values: Any decimal value between 0 and 1.
marker-fill-color
Default Value: If this value is not specified, it is set by the current map theme.
Acceptable Values: A hex value that is compatible with the CSS color property.
marker-fill-opacity
Default Value: 1.0
Acceptable Values: Any decimal value between 0 and 1.
marker-label-color
Default Value: #ffffff
Acceptable Values: A hex value that is compatible with the CSS color property.
show-directions
Default Value: false
Acceptable Values: true or false
Determines whether or not to show the ‘Get Directions’ link on map callout windows. Note that directions services require Google Directions API to be enabled in your Google Developer Console. Location services also require your website to be using HTTPS.
show-google-link
Default Value: true
Acceptable Values: true or false
Determines whether or not to show the ‘Open in Google Maps’ link on map callout windows. This link opens up a new tab (on desktop browsers) or window (on mobile browsers) and sends the selected location to Google Maps. On some devices and configurations, this link will automatically open the Google Maps app with the selected address/coordinates.
show-post-thumbnail
Default Value: true
Acceptable Values: true or false
Determines whether or not to show a small Featured Image (if one is present) for the selected Place on map callout windows.
marker-svg-path
Default Value: M37.0237112,10 C27.1233267,10 19.0948448,18.11264 19,28.14528 C19.0474224,31.64992 20.0561094,34.96 21.8363714,37.69728 L35.6292367,56.94528 C36.0150242,57.66528 36.5430789,58 37.0237112,58 C37.5517659,58 38.0323982,57.66528 38.4181857,56.94528 L52.1636286,37.69728 C53.9406864,34.91264 55,31.64992 55,28.14528 C54.9525776,18.11264 46.9240957,10 37.0237112,10 Z
Acceptable Values: SVG path notation representing a marker.