Theme options - Map Pins Management

This guide explains the different types of map pins available in the theme and how to customize them, including support for retina devices and CSS styling.

CONTENT

Price pins
Image pins
Single Pin
Map Cluster
Retina pins
Price pin css

The Maps Pins Management panel allows you to:

Enable price pins.
Choose whether to show full prices.
Use a single universal image pin.
Upload custom pin images for: Single Pin Marker (contact page), Cloud Marker (for clustered listings). or Each property category/actionn

✅ Tip: Image size recommendations:

Single Pin Marker & Entire Home: 44x50px
Cloud Marker: 70x70px

Pin Configuration Options

Use Price Pins?

Toggle to show property price directly in the pin.

Ue Full Price Pins?

If “Show Full Price Pins” is set to No, the pins will display compact prices without currency symbols or labels — e.g., 5.23m or 6.83k.

If “Show Full Price Pins” is set to YES, the pins will display in full.

Use Single Image Pin?

Forces all properties to use the same icon.
Useful for performance optimization and map speed.
Upload the pin image from Single Pin Market / Contact Page Marker option
Single Pin Marker size must be exactly: 44x50px

Upload Pins per Category/Action?

If “Use Price Pins?” is set to No, and Single Pin Marker set to NO, image pins will be used instead.
For each property type and category combination (like Entire Home in Apartment), upload a pin image.
You can find default pins in your theme package
Single Pin Marker size must be exactly: 44x50px

Important:
When creating or editing categories, always let WordPress generate the slug to ensure search compatibility with the pins you add. For more information read here – https://help.wprentals.org/article/property-custom-taxonomies-category-what-do-you-rent-city-and-neighborhoodarea/

Retina Pins Version

If pins are not displaying correctly on retina devices, follow these steps:

If using default categories/actions pin images without changing the demo categories and types names, retina versions load automatically from wprentals/css/css-images.
If you add custom categories/actions names and you use this option, you must add the default pins and their retina version at the same time
(even if you select only the non retina version image in the pin image section):
Upload the regular .jpg or .png pin in Theme Options > Map Configuration -> Maps Pin Management.
Create a retina version at double size and append _2x, _3x, _4x to the filename — e.g., sale.jpg is the image you select in Theme Options, and sale_2x.jpg, sale_3x.jpg, sale_4x.jpg are the retina version of this image which you upload at the same time. Retina devices will pick the image they need from Media based on the image name.
Upload the retina image:
- Via Media > Add New (must be in the same month as the original), or
- Via FTP to /wp-content/uploads/[year]/[month]/

Cloud Marker Image?

Replaces the default purple cloud image
To use a custom cluster image, simply upload your own icon in place of the default.
Cloud Marker image size must be: 70x70px
Upload the retina version too using the naming conventions above.

Price pins Custom Colors

To customize price pin colors per category/action, use the following sample CSS. Update class names and colors as needed. Add the code in:

Theme Options > Design > Custom CSS after you adapt the category names and colors to the ones you prefer.

.wpestate_marker.villa.entire-home{
background: #752253
}

.wpestate_marker.villa.entire-home{
border-top: 4px solid #752253;
}

.wpestate_marker.villa.entire-home:before{
border-top: 10px solid #752253;
}

.wpestate_marker.cabin.entire-home{
background: #752253;
}

.wpestate_marker.cabin.entire-home{
border-top: 4px solid #752253;
}

.wpestate_marker.cabin.entire-home:before{
border-top: 10px solid #752253;
}

.wpestate_marker.apartment.entire-home{
background: #752253;
}

.wpestate_marker.apartment.entire-home{
border-top: 4px solid #752253;
}

.wpestate_marker.apartment.entire-home:before{
border-top: 10px solid #752253;
}

.wpestate_marker.condos.entire-home{
background: #752253;
}

.wpestate_marker.condos.entire-home{
border-top: 4px solid #752253;
}

.wpestate_marker.condos.entire-home:before{
border-top: 10px solid #752253;
}

.wpestate_marker.dorm.entire-home{
background: #752253;
}

.wpestate_marker.dorm.entire-home{
border-top: 4px solid #752253;
}

.wpestate_marker.dorm.entire-home:before{
border-top: 10px solid #752253;
}

.wpestate_marker.house.entire-home{
background: #752253;
}

.wpestate_marker.house.entire-home{
border-top: 4px solid #752253;
}

.wpestate_marker.house.entire-home:before{
border-top: 10px solid #752253;
}

.wpestate_marker.villa.private-room{
background: #f7bf33;
}

.wpestate_marker.villa.private-room{
border-top: 4px solid #f7bf33;
}

.wpestate_marker.villa.private-room:before{
border-top: 10px solid #f7bf33;
}

.wpestate_marker.cabin.private-room{
background: #f7bf33;
}

.wpestate_marker.cabin.private-room{
border-top: 4px solid #f7bf33;
}

.wpestate_marker.cabin.private-room:before{
border-top: 10px solid #f7bf33;
}

.wpestate_marker.apartment.private-room{
background: #f7bf33;
}

.wpestate_marker.apartment.private-room{
border-top: 4px solid #f7bf33;
}

.wpestate_marker.apartment.private-room:before{
border-top: 10px solid #f7bf33;
}

.wpestate_marker.condos.private-room{
background: #f7bf33;
}

.wpestate_marker.condos.private-room{
border-top: 4px solid #f7bf33;
}

.wpestate_marker.condos.private-room:before{
border-top: 10px solid #f7bf33;
}

.wpestate_marker.dorm.private-room{
background: #f7bf33;
}

.wpestate_marker.dorm.private-room{
border-top: 4px solid #f7bf33;
}

.wpestate_marker.dorm.private-room:before{
border-top: 10px solid #f7bf33;
}

.wpestate_marker.house.private-room{
background: #f7bf33;
}

.wpestate_marker.house.private-room{
border-top: 4px solid #f7bf33;
}

.wpestate_marker.house.private-room:before{
border-top: 10px solid #f7bf33;
}

.wpestate_marker.villa.shared-room{
background: #62bf5f;
}

.wpestate_marker.villa.shared-room{
border-top: 4px solid #62bf5f;
}

.wpestate_marker.villa.shared-room:before{
border-top: 10px solid #62bf5f;
}

.wpestate_marker.cabin.shared-room{
background: #62bf5f;
}

.wpestate_marker.cabin.shared-room{
border-top: 4px solid #62bf5f;
}

.wpestate_marker.cabin.shared-room:before{
border-top: 10px solid #62bf5f;
}

.wpestate_marker.apartment.shared-room{
background: #62bf5f;
}

.wpestate_marker.apartment.shared-room{
border-top: 4px solid #62bf5f;
}

.wpestate_marker.apartment.shared-room:before{
border-top: 10px solid #62bf5f;
}

.wpestate_marker.condos.shared-room{
background: #62bf5f;
}

.wpestate_marker.condos.shared-room{
border-top: 4px solid #62bf5f;
}

.wpestate_marker.condos.shared-room:before{
border-top: 10px solid #62bf5f;
}

.wpestate_marker.dorm.shared-room{
background: #62bf5f;
}

.wpestate_marker.dorm.shared-room{
border-top: 4px solid #62bf5f;
}

.wpestate_marker.dorm.shared-room:before{
border-top: 10px solid #62bf5f;
}

.wpestate_marker.house.shared-room{
background: #62bf5f;
}

.wpestate_marker.house.shared-room{
border-top: 4px solid #62bf5f;
}

.wpestate_marker.house.shared-room:before{
border-top: 10px solid #62bf5f;
}

Hover Pin Style (CSS)

.hover_z_pin{
    background-color: #e74264!important;
    color: #ffffff!important;
}

.hover_z_pin:before{
    border-top: 6px solid #e74264!important;
}