Solution for Custom Pin/Marker per Store/Category

  • I’ve seen a few threads in here about this and figured I’d offer my solution. I’ve contacted WP Store Locator Support directly and asked if they could put this solution into the plugin. NOTE: this requires the use of filters and directly modifying some plugin code.

    First add the wpsl_meta_box_fields and wpsl_frontend_meta_fields filters to your child theme. Documentation for both here https://wpstorelocator.co/document/wpsl_meta_box_fields/ and here https://wpstorelocator.co/document/wpsl_frontend_meta_fields/.

    add_filter('wpsl_meta_box_fields', 'custom_meta_box_fields');
function custom_meta_box_fields($meta_fields) {    
    $meta_fields[__( 'Additional Information', 'wpsl' )] = array(
        'phone' => array(
            'label' => __( 'Tel', 'wpsl' )
        ),
        'fax' => array(
            'label' => __( 'Fax', 'wpsl' )
        ),
        'email' => array(
            'label' => __( 'Email', 'wpsl' )
        ),
        'url' => array(
            'label' => __( 'Url', 'wpsl' )
        ),
        'alternate_marker_url' => array(
            'label' => __( 'Alternate Marker Url', 'wpsl' )
        )
    );
    return $meta_fields;
}

add_filter('wpsl_frontend_meta_fields', 'custom_frontend_meta_fields');
function custom_frontend_meta_fields($store_fields) {
    $store_fields['wpsl_alternate_marker_url'] = array( 
        'name' => 'alternate_marker_url',
        'type' => 'url'
    );
    return $store_fields;
}

    Now in Edit Store > Additional Information you will have another field “Alternate Marker Url” available. Put the absolute url of the custom pin/marker here.

    Now we need to modify a little plugin code directly. We need to make it load the non minified wpsl-gmap.js script (you can minify after if you like). In wp-store-locator/frontend/class-frontend.php find the following (should be line 1664 in the latest version):

    wp_enqueue_script( 'wpsl-js', WPSL_URL . 'js/wpsl-gmap'. $min .'.js', array( 'jquery' ), WPSL_VERSION_NUM, true );

    Change this to:

    wp_enqueue_script( 'wpsl-js', WPSL_URL . 'js/wpsl-gmap.js', array( 'jquery' ), WPSL_VERSION_NUM, true );

    And finally in wp-store-locator/js/wpsl-gmap.js we need to make it set the marker url to the url specified if it was set. Find the addMarker function and add the following if block before mapIcon is initialized:

    if(infoWindowData.alternate_marker_url) {
	url = infoWindowData.alternate_marker_url;
}

    Here’s the section with the block added:

    ...
if ( storeId === 0 ) {
	infoWindowData = {
		store: wpslLabels.startPoint
	};

	url = markerSettings.url + wpslSettings.startMarker;
} else {
	url = markerSettings.url + wpslSettings.storeMarker;
}

if(infoWindowData.alternate_marker_url) {
	url = infoWindowData.alternate_marker_url;
}

mapIcon = {
	url: url,
	scaledSize: new google.maps.Size( Number( markerSettings.scaledSize[0] ), Number( markerSettings.scaledSize[1] ) ), //retina format
	origin: new google.maps.Point( Number( markerSettings.origin[0] ), Number( markerSettings.origin[1] ) ),
	anchor: new google.maps.Point( Number( markerSettings.anchor[0] ), Number( markerSettings.anchor[1] ) )
};
...

    Hope this helps ??

Viewing 6 replies - 1 through 6 (of 6 total)

  • Great work! I hope this is added into to plugin in the future ??

    Thread Starter Brian P

    (@bburgay)

    This is getting pretty hacky but figured I’d share this as well.

    If you have permalinks enabled for individual store pages you’ll need to refactor the addMarker function in wpsl-gmap.js to the following to get the correct marker on those pages. Note: you’ll need to change YOUR_SITE_DOMAIN to your site’s domain.

    function addMarker( latLng, storeId, infoWindowData, draggable, infoWindow ) {
	var url, mapIcon, marker,
		keepStartMarker = true;

	if ( storeId === 0 ) {
		infoWindowData = {
			store: wpslLabels.startPoint
		};

		url = markerSettings.url + wpslSettings.startMarker;
	} else {
		url = markerSettings.url + wpslSettings.storeMarker;
	}

	mapIcon = {
		url: url,
		scaledSize: new google.maps.Size( Number( markerSettings.scaledSize[0] ), Number( markerSettings.scaledSize[1] ) ), //retina format
		origin: new google.maps.Point( Number( markerSettings.origin[0] ), Number( markerSettings.origin[1] ) ),
		anchor: new google.maps.Point( Number( markerSettings.anchor[0] ), Number( markerSettings.anchor[1] ) )
	};
	
	// Use permalink as check to see if we have all store data (if not present we know we're on a single store page)... hacky solution to get correct marker for now
	if (!infoWindowData.permalink && storeId !== 0) {
		ajaxData = collectAjaxData( latLng, resetMap, autoLoad );
		ajaxData.max_results = 1;
		ajaxData.radius = "200";
		if (!wpslSettings.ajaxurl) {
			var domain = "YOUR_SITE_DOMAIN";
			wpslSettings.ajaxurl = domain + "/wp-admin/admin-ajax.php";
		}
		$.get( wpslSettings.ajaxurl, ajaxData, function( response ) {
			if (response.length > 0 && response[0].alternate_marker_url) {
				infoWindowData.alternate_marker_url = response[0].alternate_marker_url;
			}
			makeMarker();
		});
	}
	else {
		makeMarker();
	}
		
	function makeMarker() {
		if(infoWindowData.alternate_marker_url) {
			mapIcon.url = infoWindowData.alternate_marker_url;
		}
		marker = new google.maps.Marker({
			position: latLng,
			map: map,
			optimized: false, //fixes markers flashing while bouncing
			title: decodeHtmlEntity( infoWindowData.store ),
			draggable: draggable,
			storeId: storeId,
			icon: mapIcon
		});	

		// Store the marker for later use.
		markersArray.push( marker );

		google.maps.event.addListener( marker, "click",( function( currentMap ) {
			return function() {

				// The start marker will have a store id of 0, all others won't.
				if ( storeId != 0 ) {

					// Check if streetview is available at the clicked location.
					if ( typeof wpslSettings.markerStreetView !== "undefined" && wpslSettings.markerStreetView == 1 ) {
						checkStreetViewStatus( latLng, function() {	
							setInfoWindowContent( marker, createInfoWindowHtml( infoWindowData ), infoWindow, currentMap );
						});
					} else {
						setInfoWindowContent( marker, createInfoWindowHtml( infoWindowData ), infoWindow, currentMap );
					}
				} else {
					setInfoWindowContent( marker, wpslLabels.startPoint, infoWindow, currentMap );
				}

				google.maps.event.clearListeners( infoWindow, "domready" );

				google.maps.event.addListener( infoWindow, "domready", function() {
					infoWindowClickActions( marker, currentMap );
					checkMaxZoomLevel();
				});
			};
		}( map ) ) );

		// Only the start marker will be draggable.
		if ( draggable ) {
			google.maps.event.addListener( marker, "dragend", function( event ) { 
				deleteOverlays( keepStartMarker );
				map.setCenter( event.latLng );
				reverseGeocode( event.latLng );
				findStoreLocations( event.latLng, resetMap, autoLoad = false, infoWindow );
			}); 
		}
	}
}

    Thanks @bburgay! I figured out how to do this without modifying the plugin javascript, instead overriding it.

    Thread Starter Brian P

    (@bburgay)

    Awesome! Thanks for posting your solution!

    Plugin Author Tijmen Smit

    (@tijmensmit)

    I’m almost done with the 2.2.8 update, and will include a line in the wpsl-gmap.js file that will check for an alternate marker url. So you can use different markers for different locations if you want to without changing the core code.

    Thread Starter Brian P

    (@bburgay)

    Good deal. Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Solution for Custom Pin/Marker per Store/Category’ is closed to new replies.