Results

Markup

<div class="map_wrapper">
    <div id="map" class="map_container">
    </div>
    <div class="map_results">
        <div class="map_detail">
        </div>
        <div class="map_listings">
            <div class="map_listings_headline">
                <h2>Results <span class="map_listings_number"></span></h2>
            </div>
            <div class="map_listings_results">

            </div>
        </div>
    </div>
</div>
        

Initialize

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,geometry"></script>
<script src="src/storeLocator.all.js"></script>

<script>
    $(function() {
        $('.map_container').storeLocator({
            OPTIONS
        });
    });
</script>

<script id="YOUR_LIST_TEMPLATE_ID" type="text/x-jQuery-tmpl">
    TEMPLATE
</script>
<script id="YOUR_DETAIL_TEMPLATE_ID" type="text/x-jQuery-tmpl">
    TEMPLATE
</script>
        

Options

remote Has to be a url to your json file/data or a valid json object
height string: default null
map container height in px, if set, fullHeight will be ignored
defaultLocation string: default null
[latitude, longitude]
kml string: default null
'link_to_kml_file' or if you have more ['link_1', 'link_2]
kmlPreserveViewport boolean: default true
if false, map will point to kml not to marker bounds.
mapOptions google maps documentation
templates
 
list string: default 'mapListEntryTemplate'
ID of your jQuery template for list view
detail string: default 'mapListDetailTemplate'
ID of your jQuery template for detail view
markerOptions
 
contentField string: null
set your field name from your result data, to fill the content of your marker popup
draggable true or false: default false
bounceMarker true or false: default true
markerIcon string: default 'pins/blank.png'
dropAnimation true or false: default false
categoriesOptions
 
showFilter true or false: default false
categoryField string: default 'category'
set field name from source which is used for categories
icons if you have categories with custom icons
icons: {
 'restaurant': 'pins/restaurant.png',
 'hotel': 'pins/hotel.png'
}
filterPosition string: default google.maps.ControlPosition.LEFT_BOTTOM
https://developers.google.com/maps/documentation/javascript/controls?hl=en
template you can customize your filter template, the bold markup you will need, (a tag and data-cat="YOUR_CATEGORY")
<a class="map-marker-filter-restaurant" data-cat="restaurant"><img src="pins/restaurant.png" alt=""> Restaurant</a>
<a class="map-marker-filter-hotel" data-cat="hotel"><img src="pins/hotel.png" alt=""> Hotel</a>
to show all marker, you will need
<a data-cat="all">show all</a>
if you want to toggle your navigation, add class "filter_minimize"
<h5 class="filter_minimize">Filter by Category</h5>
<a class="map-marker-filter-restaurant" data-cat="restaurant"><img src="pins/restaurant.png" alt=""> Restaurant</a>
boundOnClick true or false: default false
if true, map will center after click on category filter
detailsOptions
 
closeTrigger string: default .map_details_close
panorama
showPanorama true or false: default false
container string: default 'pano'
ID of the panorama container
notFoundText string: default 'Street View data not found for this location.'
searchRadius int: default 50
radius to search for a panorama
if you use panorama, create a div inside result item container
<div id="pano"> </div>
searchOptions
 
show true or false: default true
placeholder string: default 'Enter your search term...'
listOptions
 
position string: default 'right'
'left' or 'right'
sortByDistance true or false: default false
distanceType string: default 'km'
calculate in miles or km
updateOn
update your list with markers in viewport
drag true or false: default true
zoom true or false: default true
resize true or false: default true
if you're using geoLocation, you must have HTTPS, otherwise, it creates an error on some browsers.
geoLocationOptions
 
show true or false: default true
icon string: default 'src/bullseye.png'
title string: default 'Show your Location'
zoom int: default 10
set new zoom level after geolocation success
position string: default google.maps.ControlPosition.TOP_LEFT
https://developers.google.com/maps/documentation/javascript/controls?hl=en
autocompleteOptions
 
show true or false: default true
class string: default 'map_btn_custom'
your css class for customized input field
placeholder string: default 'find location by city'
zoom int: default 10
set new zoom level after autocomplete success
country string or boolean: default null
insert your country code, up to 5 ['first','second','third'] or set to null or 'all' to search international
types string: default '(cities)'
https://developers.google.com/places/supported_types#table3
position string: default google.maps.ControlPosition.TOP_LEFT
https://developers.google.com/maps/documentation/javascript/controls?hl=en
errorNotFound string: default 'No result for your search!'
markerCluster
 
cluster true or false: default false
imagePath string: default 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
create custom icons in your folder e.g '/markercluster/m' named m1.png, m2.png, m3.png, m4.png and m5.png
cssClass string: default 'custom-pin'
create your custom marker with css
routeOptions
 
show true or false: default false
headline string/html: default '<h3>Direction</h3>'
placeholder string: default 'start location'
create custom icons in your folder e.g '/markercluster/m' named m1.png, m2.png, m3.png, m4.png and m5.png
trigger string: default '.map_direction_trigger'
the class of the element who open route div on click
closeTrigger string: default '.map_direction_close_trigger'
the class of the element who close route div on click
closeHtml string: default 'close'
text or html of your close link
types string: default 'address'
https://developers.google.com/places/supported_types#table3
country string: default 'ch'
put here your country code or null if start position is outside your country
notificationOptions
 
class string: default 'custom-class'
duration int: default '5000'
responsiveOptions
  integer or string: 'full' for viewport height or integer
you can set map and list height for smaller devices
[
{
    breakpoint: 768,
    settings: {
        mapHeight: 400,
        listHeight: 400
    }
},
{
    breakpoint: 480,
    settings: {
        mapHeight: 'full',
        listHeight: 400
    }
}
]

Templates

Customize your view templates, bold markup you must have

List Template

<script id="YOUR_TEMPLATE_ID" type="text/x-jQuery-tmpl">
<div class="result_item" data-id="${id}">
    <a><h3>${name}</h3></a>
<span class="stars">${rating}</span>
    <div class="result_item_info">
        {{if picture}}
          <div class="image_container">
            <img class="image" src="${picture}" alt="${name}" />
          </div>
        {{/if}}        <div class="info">
            <ul class="list-unstyled">
                <li>Address: ${address}</li>
                <li>Phone: ${phone}</li>
                <li>E-Mail: ${email}</li>
                <li>Homepage: www.website.com</li>
            </ul>
            <div class="label label-default">${category}</div>
             {{if distance}}
            <div class="label label-danger">${distance} km</div>
            {{/if}}
        </div>
    </div>
</div>
</script>

Detail Template

<script id="YOUR_TEMPLATE_ID" type="text/x-jQuery-tmpl">
<div class="result_item_detail">
<a class="map_details_close"><img src="src/close.png" alt="Close"></a>
<h3>${name}</h3>
{{if tags}}
<div class="result_item_detail_info">
    <h4>Tags</h4>
    {{each tags}}
       <span class="label label-primary">${$value}</span>
    {{/each}}
</div>
{{/if}}
{{if openings}}
<div class="result_item_detail_info opening_hours">
    <h4>Opening hours</h4>
    <dl>
    {{each(prop, val) openings}}
          <dt>${prop}</dt> <dd>${val}</dd>
    {{/each}}
    </dl>
</div>
{{/if}}
<div class="result_item_detail_info">
    <div id="pano"> </div>
</div>
</div>
</script>

Source

must fields:
"id": primary key
"location": {
    "latitude": "YOUR LATITUDE"
    "longitude": "YOUR LONGITUDE"
}
[{
    "id": 1,
    "picture": "https://placeimg.com/120/120/nature/grayscale",
    "name": "ISONUS",
    "category": "hotel",
    "rating": "3.8",
    "email": "quis@isonus.info",
    "phone": "+1 (875) 451-2176",
    "address": "220 Highland Avenue, Knowlton, Illinois, 4495",
    "about": "Consectetur et et aute nisi. Qui ea non quis cupidatat sit. Ea ipsum dolore aute consectetur nulla enim.",
    "location": {
        "latitude": "46.983398",
        "longitude": "8.43"
    },
    "tags": [
        "qui",
        "cupidatat",
        "elit",
        "officia",
        "elit"
    ],
    "openings": {
        "monday": "10:00 - 22:00",
        "tuesday": "09:00 - 21:00",
        "wednesday": "09:00 - 21:00",
        "thursday": "09:00 - 21:00",
        "friday": "09:00 - 21:00",
        "saturday": "09:00 - 21:00",
        "sunday": "closed"
    },
    other custom fields
}]
        
BUY THIS SCRIPT