Untitled

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no">
    <meta https-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="GENERATOR" content="CodeCharge Studio 5.1.1.18990">

    <script src="https://spyon.mobi/panel/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
    <link rel="stylesheet" type="text/css" class="ui" href="https://spyon.mobi/panel/js-map/map.css">
    <script src="https://spyon.mobi/panel//js-map/gmaps.js"></script>
    <script src="https://spyon.mobi/panel//js-map/markerclusterer.js"></script>


<script>

        console.log('step 1');
        $(window).load(function() {

            var locations = [
                ["39.1837062", "21.4662555", "2015/01/29 # 12:38:27 PM"],
                ["39.183709", "21.4662764", "2015/01/29 # 01:38:24 PM"],
                ["39.1837666", "21.4662601", "2015/01/29 # 02:38:19 PM"],
                ["39.18220651", "21.61570498", "2015/01/29 # 03:38:40 PM"],
                ["39.1793239", "21.6163681", "2015/01/29 # 04:38:39 PM"],
                ["39.1793691", "21.6163489", "2015/01/29 # 05:38:20 PM"],
                ["39.1793078", "21.6164045", "2015/01/29 # 06:38:41 PM"],
                ["39.1793144", "21.6163995", "2015/01/29 # 07:39:00 PM"],
                ["39.1796632", "21.6164461", "2015/01/29 # 08:38:18 PM"],
                ["39.12715688", "21.57486313", "2015/01/29 # 09:39:24 PM"],
                ["39.1277835", "21.5731795", "2015/01/29 # 10:38:37 PM"],
                ["39.18871969", "21.57539617", "2015/01/29 # 11:38:22 PM"],
                ["39.1796632", "21.6164461", "2015/01/30 # 12:38:32 AM"]
            ];
            console.log(locations);
            var bound = new google.maps.LatLngBounds();
            console.log('step 3');
            if (locations.length > 0) {
                for (i = 0; i < locations.length; i++) {
                    bound.extend(new google.maps.LatLng(locations[i][0], locations[i][1]));
                }
                console.log('step 4');
                console.log(bound.getCenter());
                var latlong = bound.getCenter();
                map = new GMaps({
                    div: '#map',
                    lat: latlong['B'],
                    lng: latlong['k'],
                    width: '100%',
                    height: '600px',
                    zoom: 12,
                    zoomControl: true,
                    markerClusterer: function(map) {
                        return new MarkerClusterer(map, [], {
                            gridSize: 15
                        });
                    }
                });
                console.log('step 5');
                for (var i = 0; i < locations.length; i++) {
                    map.addMarker({
                        lat: locations[i][1],
                        lng: locations[i][0],
                        title: locations[i][2],
                        infoWindow: {
                            content: '<center><p class="gmap_title">'+ locations[i][2] + '</p></center>'
                        }
                    });
                }
                console.log('step 6');
            } else {
                $('#map').html('<center ><div style="position:relative;top:100px">NO DATA</div></center>');
            }
        });
    </script>


<div id='map'></div>