How to Customize Google Marker InfoWindow and Sidebar of Store Locator

  • September 2, 2016

Agile Store Locator Infobox is custom made HTML, which can be edited or styled with CSS without any knowledge of scripting. Customization of Store Item or Google Maker InfoBox is pretty much easy with our plugin. You can’t only style the Google Marker Infobox but also Add/Remove attributes which you want to show on your InfoBox. This is how our default Marker Info-Window appears.


We are using jsrender library which is a lightweight library for templating, it provides the ability to add IF and ELSE condition in our script, so if we have any column data missing for a particular store we can hide that information for that store, for example, if you don’t have Phone Number available for All Store List, we can simply change enclose our HTML tag in the IF statement like this.

{{if phone}}
<div class="phone"><span class="glyphicon glyphicon-earphone"></span><b>Phone: </b><a href="tel:{{:phone}}">{{:phone}}</a></div>

By using this IF clause in it means, if the phone number is not available for any store the whole div tag (<div class=”phone”>….</div>) will not appear in the marker InfoBox.

Now, first of all, let see how many columns we can use in our info box or store view, we can use any of them to show on our marker infobox or Store ListView.

title, description, street, city, state, postal_code, country, lat, lng, phone, fax, email, website, description_2, open_hours
The Store Data we add when creating Store

The above columns are the same columns which we save in our stores, description_2 is our additional Information on Add Store.

Customization of Google Marker InfoBox

Now I’m going to show you step by step how we can customize our InfoBox, we will add an additional description to it, which is description_2 in data columns.

  • Open up your WordPress Admin panel, go to Plugins and select Editor, then Select “Agile Store Locator” from Plugin List and press Select Button. Now you will see “Plugin Files” showing the files of our plugin directory on the right side of the editor.
  • Select the right Template under this directory /wp-content/plugins/codecanyon-16973546-agile-store-locator-google-maps-for-wordpress/public/partials/.
    • Template 0 File to Modify template-frontend-0.php
    • Template 1 File to Modify template-frontend-1.php
    • Template 2 File to Modify template-frontend-2.php

    Editing InfoxBox HTML using WordPress Plugin Editor
  • Now first of all take backup of your file before customization to revert it back in case of any problem, after that search for <script id=”asl_too_tip” type=”text/x-jsrender”> script tag, under the script we have our InfoBox HTML which can be styled and customized.
  • Now we will add our Additional Description which is referred as description_2 in between the script TAG, we can simply place this block of code below Category Block. Make sure that our new attribute must be wrapped in <div> tag.
    {{if description_2}}

    Added Additional Description Tag to our InfoBox
  • Once you place the code Press Update File and refresh the front view of agile store locator, the additional Description will be appearing on your marker info-Window.
    Additional Description Added On InfoWindow

Customization of Agile Store Locator Store List

The customization of Store List which appears next to our Map is exactly same as we did for Infobox, all the same columns are available to edit in our store List, the only difference is that we will update HTML within <script id=”tmpl_list_item” type=”text/x-jsrender”> script tag instead of <script id=”asl_too_tip” type=”text/x-jsrender”>

Sidebar of Store Locator before Country Tag

Step 1 and 2 are same for customizing Store List, in step 3 we will search for HTML within <script id=”tmpl_list_item” type=”text/x-jsrender”> and update it.

Sidebar HTML in Plugin Editor

For Example, we want to show the country Name below the city, state, and Zip. We can place this line of code wrapped in <p> tag below address Block, update it and refresh the front view.

<p class="p-area">{{:country}}</p>

Country Tag added into our HTML

Now once we refresh the page, it will have a country tag added on the sidebar of our store locator.

Sidebar of Store Locator After Country Tag

Thanks for reading the article, let me know in your comments how it worked for you.

Comments :
  • Just wish to say your article is as astonishing. The clearness on your submit is just nice and
    I can think you are a professional on this subject.
    Well together with your permission let me clutch your feed to stay updated with approaching post.

    Thanks a million and please continue the gratifying work.

Leave A Comment