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

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

icons: {
 'restaurant': 'pins/restaurant.png',
 'hotel': 'pins/hotel.png'
}

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

<a data-cat="all">show all</a>

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

<div id="pano"> </div>

[
{
    breakpoint: 768,
    settings: {
        mapHeight: 400,
        listHeight: 400
    }
},
{
    breakpoint: 480,
    settings: {
        mapHeight: 'full',
        listHeight: 400
    }
}
]

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

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

[{
    "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
}]