Tell us what you are trying to do?
I am trying to display multiple markers on a map using Toolset Maps, where two markers are at the exact same address. My goal is to enable spiderfying for these overlapping markers so that users can see and click on the individual popups for each post.
Despite setting cluster="on" and spiderfy="on" in the [wpv-map-render] shortcode, the expected behavior does not occur. When both markers are at the same location, they remain clustered even when I zoom in, and they do not "spiderfy" into distinct markers. As a result, users cannot click on the individual popups, and the markers stay grouped together.
Problem Description:
Expected Behavior: When there are two markers at the exact same location, I expect that zooming in or clicking on the cluster will result in the markers being "spiderfied," allowing each marker to be viewed and clicked individually.
Actual Behavior: Instead of separating, the two markers with the same address stay clustered, even when zooming in closer to the location. Users are unable to access the individual popups for these posts since the markers do not spiderfy as expected.
Is there any documentation that you are following?
I have followed the Toolset Maps documentation that describes the use of clustering and spiderfy options with the cluster="on" and spiderfy="on" attributes. According to the available resources, I expected that enabling both options would allow the markers to automatically separate or "spiderfy" when zooming in or when they are clicked.
What is the link to your site?
hidden link
Shortcode Configuration:
[wpv-layout-start]
[wpv-items-found]
[wpv-map-render map_id="map-5" map_width="100%" map_height="700px" map_type_control="off" street_view_control="off" fitbounds="off" general_zoom="6" general_center_lat="51" general_center_lon="10" cluster="on" spiderfy="on" cluster_grid_size="40"]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-map-marker
map_id="map-5"
marker_id="marker-[wpv-post-id]"
marker_field="wpcf-event-google-maps-adresse"
]
<style>
/* Minimale Anpassung für den äußeren Google Maps Popup-Container */
.gm-style .gm-style-iw-c {
border-radius: 0 !important;
padding: 20px !important;
}
.gm-style .gm-style-iw-d {
overflow: auto !important;
}
/* Styles für unser Custom Popup */
.custom-popup {
display: flex;
max-width: 500px;
min-height: 150px;
box-sizing: border-box;
background-color: white;
}
.custom-popup-image {
flex: 0 0 160px;
max-height: 240px;
margin-right: 20px;
align-self: flex-start; /* Wichtig: Richtet das Bild am oberen Rand aus */
}
.custom-popup-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.custom-popup-content {
flex: 1;
display: flex;
flex-direction: column;
}
.custom-popup-text {
margin-bottom: 15px;
}
.custom-popup-text h3 {
margin: 0 0 15px;
font-size: 1.3em;
color: #cc4259;
}
.post-detail {
font-size: 1.05em;
margin-bottom: 10px;
}
.post-detail strong {
font-weight: bold;
}
.post-button {
align-self: stretch;
margin-top: 15px;
padding: 10px 15px;
border: 1px solid #cc4259;
color: #cc4259;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
font-weight: bold;
font-size: 1.1em;
}
.post-button:hover {
color: #EAA4B3;
border-color: #EAA4B3;
}
/* Bild auf mobilen Geräten ausblenden */
@media (max-width: 768px) {
.custom-popup-image {
display: none;
}
.custom-popup {
max-width: 100vw;
padding: 10px;
}
.custom-popup-content {
width: 100%;
}
}
</style>
<div class="custom-popup">
<div class="custom-popup-image">
[wpv-post-featured-image size="medium"]
</div>
<div class="custom-popup-content">
<div class="custom-popup-text">
<h3>[types field="event-name"][/types]</h3>
<div class="post-detail">
<div class="post-detail-label">Ort:</div>
<div class="post-detail-content">[types field="event-ortsname"][/types]</div>
</div>
<div class="post-detail">
<div class="post-detail-label">Veranstalter*in:</div>
<div class="post-detail-content">
[types field="event-veranstalter"][/types]
</div>
</div>
<div class="post-detail">
<div class="post-detail-label">Termine:</div>
<div class="post-detail-content">[types field="event-termine"][/types]</div>
</div>
<div class="post-detail">
<div class="post-detail-label">Preis:</div>
<div class="post-detail-content">[types field="event-preis"][/types]</div>
</div>
</div>
Zum Event →
</div>
</div>
[/wpv-map-marker]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-map-render]
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]Keine Veranstaltungen gefunden[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
