[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.


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.