<!DOCTYPE html>
<html>
    <body>
        <div id="map" style="width:100%;height:600px;background:#95a5a6"></div>
        <script>
            var myMap;
            var markers = [];
            var user_name_arr =<?php echo json_encode($user_arr);?>;
            var visit_id =<?php echo json_encode($visit_id);?>;
            //
            function initMap() {
                var mapOptions = {
                    center: new google.maps.LatLng(33.5571, 35.3729),
                    zoom: 2,
					scrollwheel: false,
            mapTypeControl: true,
            fullscreenControl: true,
                    mapTypeId: google.maps.MapTypeId.MAP
                };
                myMap = new google.maps.Map(document.getElementById("map"), mapOptions);
            }
            //
            function loadMarker() {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        deleteMarkers();
                        //
                        var myJSON = JSON.parse(this.responseText);
                                                    console.log(myJSON)

                        $.each(myJSON['data'],function(indx, track_row){
                            var mark = {lat: parseFloat(track_row.user_track_lat), lng: parseFloat(track_row.user_track_lng)};
                            var contentString = '<div id="content">' +
                                    '<div id="siteNotice">' +
                                    '</div>' +
                                    '<h1 id="firstHeading" class="firstHeading">' + (visit_id == 0 ? user_name_arr[track_row['app_user_id']] : track_row.Customer_Name) + '</h1>' +
                                    '<div id="bodyContent">' +
                                    '<p><b>Time: </b>' + track_row.user_track_time + '</p>' +
                                    '<p><b>Speed: </b>' + track_row.user_track_speed + '</p>' +
                                    '</div>' +
                                    '</div>';
                            addMarker(mark, user_name_arr[track_row['app_user_id']], contentString);
                        });
                        //
                        setTimeout(function () {
                            loadMarker();
                        }, 30000);
                    }
                };
                var myurl = visit_id == 0 ? "others/get_track_data" : "others/get_track_data?visit_id="+visit_id;
                xhttp.open("GET", myurl, true);
                xhttp.send();
            }
            //
            function addMarker(mark, title, contentString) {
                var marker = new google.maps.Marker({
                    position: mark,
                    map: myMap,
                    title: title
                });
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                marker.addListener('click', function () {
                    infowindow.open(myMap, marker);
					 myMap.setZoom(15);
                     myMap.panTo(this.getPosition());
                });
                markers.push(marker);
            }

            // Sets the map on all markers in the array.
            function setMapOnAll(map) {
                for (var i = 0; i < markers.length; i++)
                    markers[i].setMap(map);
            }
            //
            function deleteMarkers() {
                setMapOnAll(null);
                markers = [];
            }
            //
            loadMarker();
            //
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPQfukDXQUdWN4XNMa8asJryBPtJ9iBsQ&callback=initMap"></script>
        <!--<button type="button" onclick="loadMarker()">Change Content</button>-->
    </body>
</html>