@extends('fronts.layouts.index_layout')

<title>AED 地圖</title>
@section('content')
	<!-- Document Wrapper
	============================================= -->
	<div id="wrapper" class="clearfix">

		<!-- Page Title
		============================================= -->
    @include('fronts.layouts._page_title')
<!-- #page-title end -->

		<!-- Content
		============================================= -->
		<section id="content">
			<div class="content-wrap">
				<div class="container clearfix">
					<h3>AED 地圖</h3>
					<div class="row gutter-40 col-mb-80">
						<!-- Sidebar
						============================================= -->
{{--                        @include('fronts.layouts._sidebar')--}}
						<div class="col-md-12">

                            <div class="row" >
                                <div class="col-md-3" >
                                    <div class="bottommargin-sm">
                                        <label for="sr_target">目標： </label>
                                            <select  class="form-control" style="width:100%;" name="sr_target" id="sr_target">
                                                <option value="1">AED</option>
                                                <option value="2">安心場所</option>
                                            </select>
                                    </div>
                                </div>
                                <div class="col-md-3" >
                                    <div class="bottommargin-sm">
                                        <label for="city_id">縣市： </label>
                                            <select id="city_id" class="form-control" style="width:100%;" name="sr_city">
                                                <option value="0" selected>縣市</option>
                                                @foreach($cities as $city)
                                                    <option value="{{ $city->id }}" >{{ $city->name }}</option>
                                                @endforeach
                                            </select>
                                    </div>
                                </div>
                                <div class="col-md-3" >
                                    <div class="bottommargin-sm">
                                        <label for="area_id">鄉鎮市區： </label>
                                            <select id="area_id"  class="form-control" style="width:100%;" name="sr_area">
                                                <option value="0">鄉鎮市區</option>
                                            </select>
                                    </div>
                                </div>
                                <div class="col-md-3" >
                                    <div class="bottommargin-sm">
                                        <label for="sr_keyword">關鍵字搜尋： </label>
                                        <input type="text" class="form-control" name="sr_keyword" id="sr_keyword">
                                    </div>
                                </div>
                                <div class="col-md-3" >
                                    <div class="bottommargin-sm">
                                        <label for="place_main_type">場所類型： </label>
                                        <select id="place_main_type" class="form-control" style="width:100%;" name="sr_main_type">
                                            <option value="0">場所類型</option>
                                            @foreach($mainPlaceTypes as $city)
                                                <option value="{{ $city->id }}" >{{ $city->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3" >
                                    <div class="bottommargin-sm">
                                        <label for="place_sub_type_id">　</label>
                                        <select id="place_sub_type_id" class="form-control" style="width:100%;" name="sr_sub_type">

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3" >
                                    <div class="bottommargin-sm">
                                        <label for="">　</label>
                                        <div class="form-control btn btn-info" onclick="mapSearch('click',0,0)">檢索</div>
                                    </div>
                                </div>
                                <div class="col-md-3" >

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

                    <div class="text-left" style="margin-botton:10px;padding-left:20px;">
                        <img alt="500公尺外" src="{{ url('/images/icons/AED MAP ICON-04-04.png') }}" style="width:30px;"/> <span>500公尺外</span>
                        <img alt="500公尺內" src="{{ url('/images/icons/AED MAP ICON-04-02.png') }}" style="width:30px;"/> <span>500公尺內</span>
                    </div>    
                    <div class="col-md-12">    
                        <div id="claerButton" class="form-control btn btn-danger" style='display:none;' onclick="javascript:clranAllWindows();">清除所有視窗</div>
                        <br/>
                    </div>

                    <div class="row gutter-40 col-mb-80">
                        <div class="col-md-6">
                            <div>
                                <div id="TGMap" style="width: 100%; height: 600px; border: 1px solid #C0C0C0;">
                                </div>
                                <!--用來存放地圖的DIV物件-->
                            </div>
                            <div class="widget clearfix f-txt">
                                <h3 style="margin-bottom: 20px;">累積搜尋次數: <span id="mapSearchTotal"></span></h3>
                            </div>   
                        </div>

                        <div id="map-aed-list" class="col-md-6">
                        </div>
                    </div>

				</div>
			</div>
		</section><!-- #content end -->

		<!-- Footer
		============================================= -->

    <!-- #footer end -->

	</div><!-- #wrapper end -->
    <div id="LeafMap" style="display:none"></div>

	<div id="gotoTop" class="icon-angle-up"></div>

    <script type="text/javascript" src="{{ sprintf('https://api.tgos.tw/TGOS_API/tgos?ver=%s&AppID=%s&APIKey=%s', config('app.tgos_version'), config('app.tgos_app_id'), config('app.tgos_api_key') ) }}" charset="utf-8"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""></script>
    <script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"
            integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
            crossorigin=""></script>
{{--    <script--}}
{{--        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgfSZhyUXC3ArPXPuQQLZIqr0gVqJJhbE&callback=initMap"--}}
{{--        async--}}
{{--    ></script>--}}

    <script>
        var placeTypeObject = null;
        var subPlaceTypes = @json($subPlaceTypes);
        var areaObject = null;
        var towns = @json($towns);
        var pMap = null;
        var leafMap = null;
        var coords = null;
        var mapLayer = null;
        var WEB_LAT = null;
        var WEB_LNG= null;
        var addrlocate = new TGOS.TGAddress();
        var locationAddress ='';


        $(function(){
            //讀取地球搜尋次數
            getAndUpMapSearchCount(0);
            placeTypeObject = $('#place_sub_type_id');
            areaObject = $('#area_id');
            $('#city_id').change(function(){

                let targetObject = areaObject;



                var city_id = $(this).val();
                option = '<option value="0">鄉鎮市區</option>';

                //組合html
                $.each(towns[city_id], function( index, object) {
                    option += `<option value="${object.id}">${object.name}</option>`;
                });

                targetObject.empty();
                targetObject.append(option);
            });

            //切換場所類型
            $('#place_main_type').change(function(){

                var place_main_type = $(this).val();
                option = '<option value="0">類型</option>';

                //組合html
                $.each(subPlaceTypes[place_main_type], function( index, object) {
                    option += `<option value="${object.id}">${object.name}</option>`;
                });

                placeTypeObject.empty();
                placeTypeObject.append(option);
            }).change();

            InitWnd();

        });

        function getLocation() {
            console.log("call getLocation()");
            var lostAddress=true;
            if (navigator.geolocation) {
                navigator.geolocation.watchPosition(function(position){
                    WEB_LAT = position.coords.latitude;
                    WEB_LNG = position.coords.longitude;

                    console.log("lat: "+WEB_LAT+"; lng: "+WEB_LNG);

                    if(leafMap == null){
                        InitLeafMap();
                        InitCurrentPosition();
                        getAddress(WEB_LNG,WEB_LAT);
                        lostAddress=false;
                        // getAreaId();
                        //
                        // if(locationAddress != ''){
                        //     getAreaId();
                        // }

                    }
                });
                setTimeout(function () {
                    if(lostAddress){
                        $("select[name=sr_city]").val(2);
                        //限制25筆 並額外追加area條件  
                        mapSearch('auto',25,0);
                    }
                }, 2000);
            } else {
                WEB_LAT = null;
                WEB_LNG = null;
                console.log("Geolocation is not supported by this browser.");
            }
        }

        //取得位置地址
        function getAddress(lng , lat) {
            console.log("getAddress");
            var addrpt = new TGOS.TGPoint(lng, lat);
            addrlocate.nearestAddress(addrpt, TGOS.TGCoordSys.EPSG3857,  //利用滑鼠點擊位置查詢最鄰近地址
                function(result, status){
                    var addrcon = result.formattedAddress;  //取得最鄰近地址查詢結果
                    // var addrpoint = result.geometry.location;
                    locationAddress = addrcon;	//組合顯示訊息
                    //console.log("locationAddress:"+locationAddress);
                    getAreaId(locationAddress.substr(0, 3),locationAddress.substr(3, 3));

                }
            );
        }

        //輸入城市名稱取得城市ID
        function getAreaId(city = '',area = '') {
            console.log('getAreaId:'+city+"|"+area);
            $.ajax({
                url: "{{ action('App\Http\Controllers\Fronts\IndexController@getAreaIdAjax') }}",
                type: "get",
                data: {
                    "city":city,
                    "area":area
                },
                dataType: 'json',

            }).done(function (data) {
                //console.log("sr_city_area:"+data[0]+"|"+data[1]);
                $("select[name=sr_city]").val(data[0]);
                var area_id=data[1]??0;
                //限制25筆 並額外追加area條件  
                mapSearch('auto',25,area_id);
            });
        }


        var tgMarkerCluster = null;
        var markers = [];
        var infowindows = [];
        var infowindow = null;
        var isMobile = false; 
        var messageBoxArray = [];
        function getAndUpMapSearchCount(type){
            var fd = new FormData();
            fd.append('type', type);
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: "{{ action('App\Http\Controllers\Fronts\IndexController@mapSearchCount') }}",
                type: "POST",
                data: fd,
                enctype: 'multipart/form-data',
                processData: false,  // tell jQuery not to process the data
                contentType: false   // tell jQuery not to set contentType
            }).done(function (data) {
               
                $("#mapSearchTotal").html(data.mapSearchTotal);
            });
        }
        function getAndUpMapSearchCount(type){
            var fd = new FormData();
            fd.append('type', type);
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: "{{ action('App\Http\Controllers\Fronts\IndexController@mapSearchCount') }}",
                type: "POST",
                data: fd,
                enctype: 'multipart/form-data',
                processData: false,  // tell jQuery not to process the data
                contentType: false   // tell jQuery not to set contentType
            }).done(function (data) {
               
                $("#mapSearchTotal").html(data.mapSearchTotal);
            });
        }
        if (/iPad/i.test(navigator.userAgent)) {
            isMobile = true;
            $("#claerButton").show();
            }
         if (/Macintosh/i.test(navigator.userAgent)) {
                try {
                    document.createEvent('TouchEvent');
                    isMobile = true;
                $("#claerButton").show();
                } catch (e) {}
          }
        // device detection
        if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
                        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
                        isMobile = true;
                        $("#claerButton").show();
        }

        function mapSearch(type,limit,sr_area){
            console.log("call mapSearch()");
            $("#map-aed-list").html("檢索中...");

            var fd = new FormData();
            fd.append('sr_target', $("select[name=sr_target]").val());
            fd.append('sr_city', $("select[name=sr_city]").val());
            if(sr_area>0)fd.append('sr_area', sr_area);
            else fd.append('sr_area', $("select[name=sr_area]").val());
            fd.append('sr_keyword', $("input[name=sr_keyword]").val());
            fd.append('sr_main_type', $("select[name=sr_main_type]").val());
            fd.append('sr_sub_type', $("select[name=sr_sub_type]").val());
            fd.append('limit', limit);
            $.ajax({
                url: "{{ action('App\Http\Controllers\Fronts\IndexController@mapSearch') }}",
                type: "POST",
                data: fd,
                enctype: 'multipart/form-data',
                processData: false,  // tell jQuery not to process the data
                contentType: false   // tell jQuery not to set contentType
            }).done(function (data) {
                $("#map-aed-list").html(data);

                if (tgMarkerCluster != null) {
                    tgMarkerCluster.removeMarkers(markers, true);
                }

                if (typeof TGOS == "undefined") {
                    for (let i = 0; i < markers.length; i++) {
                        markers[i].setMap(null);
                    }

                    infowindow = new google.maps.InfoWindow();
                }

                infowindows = [];
                markers = [];
                $(".map-aed").each(function(){
                    var placeName = $(this).children('td').eq(0).text();
                    var placeLocationName = $(this).children('td').eq(1).text();
                    var lat = parseFloat($(this).attr('lat'));
                    var lng = parseFloat($(this).attr('lng'));
                    var openHours = $(this).attr('openHours') == "undefined" ? null:$(this).attr('openHours');
                    var place_phone = $(this).attr('place_phone');
                    var aed_place_desc = $(this).attr('aed_place_desc');
                    var Aed_place_photo1 = $(this).attr('Aed_place_photo1').length === 0 ? null:$(this).attr('Aed_place_photo1');
                    var Aed_place_photo2 = $(this).attr('Aed_place_photo2').length === 0 ? null:$(this).attr('Aed_place_photo2');
                    var Aed_place_photo3 = $(this).attr('Aed_place_photo3').length === 0 ? null:$(this).attr('Aed_place_photo3');
                    var isSafePlace = $(this).attr('isSafePlace') == "undefined" ? null:$(this).attr('isSafePlace');
                    var placement = $(this).attr('placement') == "undefined" ? null:$(this).attr('placement');

                    // console.log(lat+' : '+lng);

                    var imgUrl = "{{ url('/images/icons/AED MAP ICON-04-04.png') }}";
                    if(coords != null && lat > coords.x1 && lat < coords.x2 && lng > coords.y2 && lng < coords.y1){
                        imgUrl = "{{ url('/images/icons/AED MAP ICON-04-02.png') }}";
                    }

                    if (typeof TGOS != "undefined") {
                        var markerPoint = new TGOS.TGPoint(lng, lat);
                        var img_intval=1;
                        if(isMobile)img_intval=2;
                        var markerImg = new TGOS.TGImage(imgUrl,
                            new TGOS.TGSize(38*img_intval, 33*img_intval), new TGOS.TGPoint(0, 0), new TGOS.TGPoint(10, 33));

                        pTGMarker = new TGOS.TGMarker(pMap, markerPoint,'', markerImg, {flat:false});

                        var InfoWindowOptions = {
                            maxWidth:300,	//訊息視窗的最大寬度
                            pixelOffset: new TGOS.TGSize(5, -30)	//InfoWindow起始位置的偏移量, 使用TGSize設定, 向右X為正, 向上Y為負
                        };

                        let imgAry = [Aed_place_photo1,Aed_place_photo2,Aed_place_photo3];
                        var imgSrc = "";
                        imgAry.forEach(function(img){
                            // console.log(img);
                            if(img){ imgSrc += "<img src='"+img+"' alt='' width='90' height='60'>" }
                        });

                        if (isSafePlace == null) {
                            messageBox = new TGOS.TGInfoWindow(
                                "<h4>" + placeName + "</h4>"
                                + "AED位置：" + placeLocationName + "<br>"
                                + "地點描述：" + aed_place_desc + "<br>"
                                + "緊急連絡電話：" + place_phone + "<br>"
                                +  openHours +"<br>"
                                +  imgSrc
                                , new TGOS.TGPoint(lng, lat), InfoWindowOptions);	//建立AED訊息視窗
                        }else{
                            messageBox = new TGOS.TGInfoWindow(
                                "<h4>" + placeName + "</h4>"
                                + "場所位置：" + placeLocationName + "<br>"
                                + "場所AED位置 / 緊急連絡電話：<br>" + placement
                                +  imgSrc
                                , new TGOS.TGPoint(lng, lat), InfoWindowOptions);	//建立安心場所訊息視窗
                        }

                        TGOS.TGEvent.addListener(pTGMarker, "mouseover", function (pTGMarker, messageBox, pMap) {
                            return function () {
                                messageBox.open(pMap, pTGMarker);
                            }
                        }(pTGMarker, messageBox, pMap));//滑鼠監聽事件--開啟訊息視窗

                        TGOS.TGEvent.addListener(pTGMarker, "mouseout", function (messageBox) {
                            return function () {
                                messageBox.close();
                            }
                        } (messageBox));

                        if(isMobile){
                            TGOS.TGEvent.addListener(pTGMarker, "click", function (pTGMarker, messageBox, pMap) {
                                return function () {
                                    console.log( "click");
                                    messageBox.open(pMap, pTGMarker);
                                    messageBoxArray.push(messageBox);
                                }
                            }(pTGMarker, messageBox, pMap));//行動版連點開啟--開啟訊息視窗
                        }

                        markers.push(pTGMarker);
                    }else{
                        // var marker = L.marker([lat, lng]).addTo(pMap);
                        // marker.bindPopup($(this).find('td').get(0).text).openPopup();

                        marker = new google.maps.Marker({
                            position: {lat: lat, lng: lng},
                            icon: imgUrl,
                            map: pMap,
                        });

                        var content = '<h4>'+placeName+'</h4><br/>'+placeLocationName;


                        markers.push(marker);

                        attachSecretMessage(marker,content) ;

                    }
                });

                if (typeof TGOS != "undefined") {
                    tgMarkerCluster = new TGOS.TGMarkerCluster(pMap, [], {});
                    tgMarkerCluster.addMarkers(markers, true);
                }else{
                    pMap.setZoom(8);
                    // const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                    // markerArr = markers.map((location, i) => {
                    //     return new google.maps.Marker({
                    //         position: location,
                    //         label: labels[i % labels.length],
                    //     });
                    // });
                    // new MarkerClusterer({ markerArr, pMap });
                }



                var dtParams = {
                    "searching": false, // 顯示搜尋
                    "ordering": false, // 顯示搜尋
                    "bPaginate": false, // 顯示搜尋
                    "info":    false, // 顯示資訊
                    "paging":    true, // 分頁
                    "pageLength": 10,
                    autoFill: {
                        horizontal: true
                    },
                };
                $("#map-aed-list table").DataTable(dtParams);
            });
            getAndUpMapSearchCount(type);
        }
        function clranAllWindows(){
            if (messageBox = null){

                console.log("訊息視窗未建立");

            } else{
                
                for (var i = 0; i < messageBoxArray.length; i++) {
                   
                    messageBoxArray[i].close();

                }
            }  
        }
        function attachSecretMessage(marker, content) {
            var infowindow = new google.maps.InfoWindow({
                content: content ,
                size: new google.maps.Size(200, 200)
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(marker.get('map'), marker);
            });
        }

        function initMap(){

            getLocation();
            var lat = WEB_LAT != null ? WEB_LAT : 24.2201031;
            var lng = WEB_LNG != null ? WEB_LNG : 120.9558744;

            pMap = new google.maps.Map(document.getElementById("TGMap"), {
                center: { lat: lat, lng: lng },
                zoom: 8,
            });
        }

        function InitCurrentPosition(){
            var lat = WEB_LAT != null ? WEB_LAT : 24.2201031;
            var lng = WEB_LNG != null ? WEB_LNG : 120.9558744;


            var markerPoint = new TGOS.TGPoint(lng, lat);
            var markerImg = new TGOS.TGImage("http://api.tgos.tw/TGOSMAPAPI/images/Sample/marker.png"
                , new TGOS.TGSize(38, 33),new TGOS.TGPoint(0, 0), new TGOS.TGPoint(10, 33));
            var pTGMarker = new TGOS.TGMarker(pMap, markerPoint,"NTU", markerImg);

            //地圖定位到使用者位址
            moveToTarget(lat,lng);
        }

        function InitLeafMap(){
            var lat = WEB_LAT != null ? WEB_LAT : 24.2201031;
            var lng = WEB_LNG != null ? WEB_LNG : 120.9558744;

            leafMap = L.map('LeafMap').setView([lat, lng], 7);
            // mapLayer = L.esri.basemapLayer('Streets').addTo(pMap);

            // mapLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            //     maxZoom: 18,
            //     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            //         'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            //     id: 'mapbox/streets-v11',
            //     tileSize: 512,
            //     zoomOffset: -1
            // }).addTo(leafMap);

            var circle = L.circle([parseFloat(lat), parseFloat(lng)], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0,
                stroke: false,
                radius: 500
            }).addTo(leafMap);

            var circle_bound = circle.getBounds();
            coords = {
                'x1': Math.round(circle_bound._southWest.lat * 100000) / 100000,
                'x2': Math.round(circle_bound._northEast.lat * 100000) / 100000,
                'y1': Math.round(circle_bound._northEast.lng * 100000) / 100000,
                'y2': Math.round(circle_bound._southWest.lng * 100000) / 100000
            };

            console.log("coords：" + JSON.stringify(coords));
        }

        function InitWnd() {

            getLocation();
            var lat = WEB_LAT != null ? WEB_LAT : 24.2201031;
            var lng = WEB_LNG != null ? WEB_LNG : 120.9558744;

            var pOMap = document.getElementById("TGMap");
            if (typeof TGOS != "undefined") {
                pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3857); //宣告TGOnlineMap地圖物件並設定坐標系統
            }else{



            }

        }

		function findLocation( selector, getLatitude, getLongitude ) {
			jQuery(selector).gMap('addMarker', {
				latitude: getLatitude,
				longitude: getLongitude,
				content: 'You have selected this Location.',
				popup: true
			}).gMap('centerAt', {
				latitude: getLatitude,
				longitude: getLongitude,
				zoom: 12
			});
		}

		jQuery(window).on( 'pluginGmapReady',  function(){

			var t = setTimeout( function(){
				if(navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(function(position) {
						jQuery('#google-map').gMap('addMarker', {
							latitude: position.coords.latitude,
							longitude: position.coords.longitude,
							content: 'You are here!',
							popup: true
						}).gMap('centerAt', {
							latitude: position.coords.latitude,
							longitude: position.coords.longitude,
							zoom: 14
						});
					}, function() {
						alert('Couldn\'t find you :(');
					});
				}
			}, 200 );

		});

		jQuery('#location-submit').click( function(e){

			var locationFinder = jQuery(this).parent().parent().find('#location-input').val();
			var locationFinderIcon = jQuery(this).parent().parent().find('.input-group-text').find('i');

			jQuery('#location-coordinates').fadeOut();

			if( locationFinder != '' ){
				locationFinderIcon.removeClass('icon-map-marker').addClass('icon-line-loader icon-spin');

				jQuery.ajax({
					url: 'https://maps.google.com/maps/api/geocode/json?key=YOUR_UNRESTRICTED_API_KEY&address=' + encodeURI(locationFinder),
					//force to handle it as text
					dataType: "text",
					success: function(data) {
						var json = jQuery.parseJSON(data);
						findLocation( '#google-map', json.results[0].geometry.location.lat, json.results[0].geometry.location.lng );
						jQuery('#latitude-text').html('<strong>Latitude:</strong> ' + json.results[0].geometry.location.lat);
						jQuery('#longitude-text').html('<strong>Longitude:</strong> ' + json.results[0].geometry.location.lng);
						jQuery('#location-coordinates').fadeIn();
						locationFinderIcon.removeClass('icon-line-loader icon-spin').addClass('icon-map-marker');
					}
				});
			} else {
				alert('Please enter your Location!');
			}
			e.preventDefault();
		});

        function moveToTarget(lat, lng){
            if (typeof TGOS != "undefined") {
                pMap.setZoom(17);      //指定地圖起始層級
                pMap.setCenter(new TGOS.TGPoint(lng, lat));
                // tgMarkerCluster.redrawAll();
            }else{
                pMap.panTo({ lat: parseFloat(lat), lng: parseFloat(lng) });
                pMap.setZoom(19);
            }

        }
	</script>

@endsection