Add this to the wpsl-gmap.js file.
$( "#wpsl-stores" ).on( "click", "li", function() {
var i, len, storeId = $( this ).data( "store-id" );
for ( i = 0, len = markersArray.length; i < len; i++ ) {
if ( markersArray[i].storeId == storeId ) {
map.setCenter( markersArray[i].position );
map.setZoom( 15 );
return false;
}
}
});
Thread Starter
Pipo
(@epipo)
Awesome!! Thanks a lot, it’s working like a charm!!
Yes!
This is also a function I need, but how do I add the the function as a separate link eg. above “Show directions”?
I want to keep the URL to the store homepage function.
Something like this:
Store name (with url link)
Address
Distances
Zoom here
Directions
Thanks Tijmen, for this great plug-in!
BR
Simon
@simon
If you open the /js/wpsl-gmap.js then search for ‘function storeHtml( response, url )’ or if you use the latest version go to line 1143. Then at the bottom of the function you see this.
html = "<li data-store-id='" + id + "'>
That line creates the html for the store listing. You can modify the order of the elements, and add a new link wherever you want and then give it an id. Something like this.
<a id='show-directions'>Show Directions</a>
Then copy the code from this post https://wordpress.org/support/topic/zoom-to-marker-from-store-list?replies=4#post-5794555 and change the
$( "#wpsl-stores" )
into this.
$( "#show-directions" )
Thanks for your hint!
A friend helped me complete the function.
Here is that solution:
/* Zoom to store */
$("#wpsl-stores").on('click', '.zoom-to-store', function() {
var i, len, $parentLi = $( this ).parents( "li" ), storeId = $parentLi.data( "store-id" );
for ( i = 0, len = markersArray.length; i < len; i++ ) {
if ( markersArray[i].storeId == storeId ) {
map.setCenter( markersArray[i].position );
map.setZoom( 15 );
return false;
}
}
});
String to insert at html = “<li data-store-id='” + id + “‘>
"<br><a class='zoom-to-store' href='#'>Zoom in map</a>"
