title = "Destinations"
url = "/destination"
layout = "default"
is_hidden = 0
==
<?php
use RainLab\Blog\Models\Category;
    function onStart()
    {
        $posts = Category::where("slug", "destination")->first();
        $this['posts'] = $posts->posts;
		$this['js'] = "assets/js/script.min.js";
        $this['js'] = "assets/js/destination.min.js";
	}
?>
==
{% put styles %}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    {% endput %}

	{% put scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" type="text/javascript"></script>
    <script src="{{'assets/js/lib/maplace.min.js'|theme}}"></script>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBsK-4MMiRu1xHoaQXoJ6Qtwn4rBzKyJBQ"></script>
    {% endput %}

    {% put scripts_inline %}
    <script type="text/javascript">
        $(document).ready(function() {
            mapPlace();
        });

        function mapPlace() {

            {% for post in posts %}
            $(document).on("click", "#ullist_a_{{loop.index}}", function() {
                $('.owl-destination').trigger('to.owl.carousel', {{loop.index0}});
            });
            {% endfor %}

            var LocsAB = [
                {% for post in posts %}
                {
                    lat: {{post.destination_lat}},
                    lon: {{post.destination_lon}},
                    title: '{{post.title}}',
                    icon: 'https://maps.gstatic.com/mapfiles/transparent.png',
                    html: '<h3>{{post.title}}</h3>',
                    animation: google.maps.Animation.DROP
                },
                {% endfor %}
            ];


            ;
            (function($, window, undefined) {
                'use strict';

                var $doc = $(document),
                    Modernizr = window.Modernizr,
                    lt_ie9 = false;

                $(document).ready(function() {
                    if ($(window).width() > 770) {
                        var ismobile = false;
                    } else {
                        var ismobile = true;
                    }

                    var menu = new Maplace({
                        map_div: '#gmap-4',
                        controls_type: 'list',
                        zoom: 8,
                        controls_cssclass: 'side-nav',
                        controls_on_map: false,
                        locations: LocsAB
                    }, ismobile);

                    menu.Load();
                });

            })(jQuery, this);
        }
    </script>
    {% endput %}

    {% put additional_flying_elements %}
    {% endput %}

    {% put footer_pusher %}
    {% endput %}

    {% put modal %}
    {% endput %}

    <section id="destination-01">
        <div id="gmap-4" class="gmap ktpid-003 full-bg-img"></div>
    </section>
    
    <section id="destination-02">
        <div class="container">
            <div class="row">
                <div class="col-md-9 ktpid-018">
                    <div class="owl-destination owl-carousel owl-theme"> 
                        {% for post in posts %}
                        <div class="col-md-12 item" data-hash="{{loop.index}}">
                            <div class="row">
                                <div class="col-md-6 right-col">
                                    <img src="{{post.featured_images[0].path}}">
                                </div>
                                <div class="col-md-6 right-col" id="right-col-2">
                                    <h4 class="mt-3 mt-lg-0">{{post.title}}</h4>
                                    <hr>
                                    <div>
                                        {{post.destination_desc}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-md-3 mt-4 mt-lg-0 ktpid-019">
                    <h4 class="mb-3">List of attractions</h4>
                    <div class="gmap_controls" id="controls"></div>
                </div>
            </div>
        </div>
    </section>