Code Food Travel repeat!

Customize WordPress Google Maps Store Locator Plugin: WPSL

This is a post of all the awesome mods I was able to do on WP Store Locator to have it work the way I wanted, mainly:

  • Remove the search bar
  • Display results as a grid row (responsively designed)
  • Customize the store info attributes.. showing phone and hours natively
  • Disabling Scrollwheel (so when you’re scrolling down the page, it doesn’t start zooming into the map
  • Disabling Dragging on mobile devices (so when you’re touch scrolling you don’t get stuck in quicksand land on panning around the map and you can’t leave that section of the screen)

 

Hands down, this is the cleanest of them all and not filled with complicated garbage. I went through ALL the rest of the popular ones and their request for you to upgrade to get ‘premium features’ at $750+ was driving me mad.

Thank gosh I found this one. The MAIN issue with the others is that it wouldn’t let you specify your start location – it would put an ugly ass “home” icon in the middle of the US, and that would horribly zoom out your map to accommodate for that marker unless you wanted to pay hundreds of dollars to get rid of it.

Luckily WPSL lets you specify your starting home location for the map view! I set mine as one of the stores I’m displaying.. just so it can display nice and close.

Next benefit of WPSL is that you can easily mod the javascript with little to know JS knowledge! (aka me) to have it display what you want.

Removing the search bar & Displaying the results as rows of 4 (works for responsive layouts too!)
(CSS MODS)

/* * * LOCATION MODS * * */
#wpsl-result-list li {

	width: 23%;
	min-width: 180px;
	float: left;
	margin-right: 20px;
}

.wpsl-search {display:none;}

Customizing the Store Listing results to natively display the PHONE # and HOURS without having to click on the marker to load the info window
(JS MODS)

This was line 813 in the file wpsl-gmap.js
Also note: I took out distance and directions (because i set my starting marker at one of the stores.. so it would just display 0 miles away and give false directions).

		/* * * * *CUSTOM STEVEN CHU * * * * */
		html = "</pre>
<ul>
	<li data-store-id="&quot; + id + &quot;">
<div>
" + storeImg + "<strong>" + store + "</strong><span class="wpsl-street">" + street + "</span>"  + city + " " + state + " " + zip + "

" + moreInfo + "</div>
<span class="store-phone">" + response.phone + "</span>

<span class="store-hours">" + response.hours + "</span></li>
</ul>
<pre>
";

Disabling Scrollwheel Zooming on computers & Disabling Dragging on mobile devices

Thanks to this amazing snippet by Kenny Brijs, I found the corresponding sections in the plugin to modify.

BASE CODE:

function initMap(){
	var isDraggable = $(document).width() > 480 ? true : false; //If site is wider than 480px, isDraggable = true, else false.
	var mapOptions = {
		draggable: isDraggable,
		scrollwheel: false, //Prevent users to start zooming the map when scrolling down page
	};
}

How to modify in WPSL Store Locator: Find wpsl-gmap.js and search CNTL+F / CMD+F for myOptions.
On my version of WPSL (1.2.13), it is line 67

Just above myOptions array, I pasted the variable isDraggable if screen is above 480px.
Then in the options, I added in the draggable option (to our isDraggable specifications) and scrollwheel set to false – Both of these options WPSL does not have by default!

My final code that I replaced in the plugin file on my live website is:

/* * * CUSTOM STEVEN CHU * * */
	var isDraggable = $(document).width() > 480 ? true : false; //If site is wider than 480px, isDraggable = true, else false.


    myOptions = {
		zoom: zoomLevel,
		center: startLatLng,
		mapTypeId: mapType,
		mapTypeControl: false,
		panControl: false,
		streetViewControl: streetViewVisible,
		draggable: isDraggable,
		scrollwheel: false, //Prevent users to start zooming the map when scrolling down page
			zoomControlOptions: {
				style: zoomControlStyle,
				position: zoomControlPosition
			}
	};

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

Leave a Reply

%d bloggers like this:
Read previous post:
How to display image slides / slider in Redux Framework on WordPress

I like Redux Framework (formerly NHP Options) for easily building an interface for theme customization options, however I think they...

Close