skip to Main Content
< All Articles
Print

Map with Multiple Listings

Default Shortcode

Following Shortcode displays last 10 properties ordered by date in Ascending order on a Map.

[rem_maps]


Order and Orderby Attributes

Following Shortcode displays 9 recent properties on the map.

[rem_maps order="DESC" total_properties="9" orderby="date"]

You can use the following values for order attribute

  • DESC – Descending order of orderby attribute
  • ASC – Ascending order of orderby attribute

You can use the following values for orderby attribute

  • date – Sort by Property published date
  • ID – Sort by Property ID
  • author – Sort by Property Agent
  • title – Sort by Property Title
  • modified – Sort by Property Modify Date
  • rand – Random order

Tag Specific Properties

You can use tags attribute to display properties that are tagged with a specific tag. The following shortcode will display all properties that are tagged with wood.

[rem_maps total_properties="-1" tags="wood"]

You can also use multiple tag names separated by commas. Example: tags=”wood,carpet”


Prefer Near Properties (Enables Location Tracking)

You can prefer those properties to display first which are near to the visitor’s current location. Use attribute nearest_porperties and set its value to enable.

[rem_maps total_properties="10" nearest_porperties="enable"]

It enables geolocation tracking and thus asks the visitor to allow his location tracking. Your site must be SSL enabled for better results.


Display “For Sale” Properties

You can use meta attribute to filter properties based on any default field or custom field created by custom fields menu. Suppose you want to display only those properties which have Purpose set to Sell.

[rem_maps meta="property_purpose|Sell"]

Please note that meta attribute accepts field name and value separated by a pipe “|” sign. Value and field name both are case sensitive.


Display Rented Properties

As mentioned above, you can simply use the meta attribute, setting its value to property_purpose|Rent.

[rem_maps meta="property_purpose|Rent"]


Type Specific Properties

You can display a list of properties based on property type using property_type field name in meta attribute. The following shortcode will display all Houses on a large map

[rem_maps meta="property_type|House"]

Similarly, the following shortcode will display all Offices.

[rem_maps meta="property_type|Office"]

and the following will display all Retails.

[rem_maps meta="property_type|Retail"]


Filter by Multiple Meta

You can also use multiple fields in meta attribute. Each field-value group separated by commas. In the following example, it will display all those properties having country set to Australia and the city set to Sydney.

[rem_maps meta="property_city|sydney,property_country|australia"]

Again, all field names and values in meta attribute are case sensitive.


Display ID Specific Properties

If you want to display some specific properties using their IDs, you can use attribute ids and set its value to comma separated property ids.

[rem_maps ids="124,456,789"]


Loading Labels

Customize the default loading messages by using load_heading and load_desc attributes.

[rem_maps load_heading="Just a Second!" load_desc="Loading Properties..."]


Map Height

By default map’s height is 600px, but you can change it. Use attribute map_height to change it, don’t forget to provide unit also.

[rem_maps map_height="450px"]


My Location Marker

My location marker appears on the map when users click on the location icon. You can customize it using my_location_icon attribute and providing URL to the icon.

[rem_maps my_location_icon="http://rem.webcodingplace.com/wp-content/uploads/2018/01/single-home-pin.png"]

Recommended size is 100×100 and format PNG.


Circle Markers

You can customize the green circle that appears for multiple properties using attribute circle_icon and providing URL to the icon.

[rem_maps circle_icon="http://rem.webcodingplace.com/wp-content/uploads/2018/01/single-home-pin.png"]

Recommended size is 55×55 and format PNG.


Customize Markers based on Property Purpose

You can use different markers for sale and rent properties on the map, using attribute icons_data. It contains icon URLs based on the value separated by commas. It follows the following structure.

VALUE|STATIC_ICON_URL|HOVER_ICON_URL

So, our shortcode will become

[rem_maps icons_data="Sell|http://rem.webcodingplace.com/wp-content/uploads/2018/01/housessales.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/housessales_2x-1.png,Rent|http://rem.webcodingplace.com/wp-content/uploads/2018/01/housesrent.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/housesrentals_2x.png"]

Recommended size is 72×60 and format PNG.


Customize Markers based on Custom Meta

Markers can also be differentiated by other meta like you may want to use a different icon for a house, different for Villa and so on. Because these are property types, our key will be property_type and we have to use it in shortcode as a value of icons_by_meta attribute. Then we will follow the above procedure to provide custom icons in icons_data attribute. Following is shortcode that we’re using on the homepage of our demo, where markers are different based on Property Type.

[rem_maps icons_by_meta="property_type" icons_data="House|http://rem.webcodingplace.com/wp-content/uploads/2018/01/single-home-pin.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/single-home-hover-pin.png,Duplex|http://rem.webcodingplace.com/wp-content/uploads/2018/01/condominium-pin.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/condominium-hover-pin.png,Office|http://rem.webcodingplace.com/wp-content/uploads/2018/01/apartement-pin.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/apartement-hover-pin.png,Retail|http://rem.webcodingplace.com/wp-content/uploads/2018/01/family-house-pin.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/family-house-hover-pin.png"]

The recommended size is 72×60 and format PNG.


Custom Colors

You can use the following attributes in rem_maps shortcode to customize the colors. Details are given with each attribute.

Attributes Description
btn_bg_color Set buttons background color for all buttons on the map.
btn_text_color Set buttons text color for all buttons on the map.
btn_bg_color_hover Set buttons background color on hover for all buttons on the map.
btn_text_color_hover Set buttons text color on hover for all buttons on the map.
loader_color Set color of loading box.
water_color Set map watercolor.
fill_color Set map natural fill color.
poi_color Set map point of interests color.
poi_color_hue Set map point of interests hue color.
bottom_btn_bg_color Background color for bottom buttons (if type_filtering is enabled)
bottom_btn_text_color Text color for bottom buttons (if type_filtering is enabled)
bottom_btn_bg_color_hover Background color for bottom buttons when hovered (if type_filtering is enabled)
bottom_btn_text_color_hover Text color for bottom buttons when hovered (if type_filtering is enabled)
bottom_btn_bg_color_active Background color for bottom buttons when active (if type_filtering is enabled)

Example Usage:

[rem_maps btn_bg_color="#16a393" btn_text_color="white" btn_bg_color_hover="#01a38a" btn_text_color_hover="#ffffff"]

You can either use a color name as value or color code with a # sign.

All Available Attributes

Attribute Default Value Description
load_heading Loading Maps Map preload message
load_desc Please Wait… Map preload message
ids Comma-separated ids of properties to display on the map
total_properties 10 Total number of properties to display on the map
order ASC Order of properties to fetch
orderby date Sort properties by date, ID, title or rand for random
meta Please read using meta attribute
tags A comma-separated list of tags to display tag specific properties
agent Agent id for agent-specific listings, you can also provide current for logged in agent’s listings
nearest_properties disable Enable or Disable Geolocation for listings nearest properties first
map_height Map height along with the unit. Eg: 450px
type_filtering disable Enable it to display filter options below the map (only for Google Maps)
filter_by_key property_type If type_filtering enabled, provide field name here to filter
filter_options House,Duplex,Apartment If type_filtering enabled, provide field values here separated by commas
use_map_from You can specify here which map mode you want to use, either leaflet or google_maps
def_lat Default latitude
def_long Default longitude
map_zoom Map zoom level
map_id leafletmaps Map id, if more than one maps are used on a single page.
icons_by_meta property_purpose Please read above (under the heading Customize Markers)
icons_data Please read above (under the heading Customize Markers)
my_location_icon Please read above (under the heading My Location Marker)
circle_icon Please read above (under the heading Circle Markers)

By default, Google Maps auto-center the map focusing available listings. You can disable this behavior by setting the auto_center attribute as disable. Otherwise, def_lat, def_long, and map_zoom will not work for Google Maps.

Quick Navigation
Back To Top