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 |
|
|
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
}]