Untitled

<!DOCTYPE html>
<html>
<head></head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
    <title></title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    #map{
    height: 500px;
    width: 100%;
    }
    </style>
<body>

<div id="map"></div>
 <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script>
var mapObject;
    function initMap()
    {
        var location = {lat: 51.533403, lng: 46.021206}; <!-- coordinats >
        mapObject = new google.maps.Map(document.getElementById("map"), {
            zoom:20,
            center: location});
    }

    function getRequest() {
    $.ajax({
        url:'http://www.mocky.io/v2/5af5c5833100002c000025c8'
        , type:'GET'
        , dataType: "jsonp"
        , success: function(res) {
                console.log("good");
var i;
            for (i = 0; i < res.length; i++){
               var infoBox = new google.maps.InfoWindow({});
               var marker = new google.maps.Marker({
                      position: new google.maps.LatLng(res[i].latitude, res[i].longitude),
                      map: mapObject,
                      title: res[i].name,
                      id: res[i].id
                    });
               var s = res[i].name + ',' + res[i].owner + ','
                                         + 'Date: ' + res[i].dateD
                                         + "." + res[i].dateM + '.'
                                         + res[i].dateY + ',  Time: '
                                         + res[i].timeH + ":" + res[i].timeM;
               google.maps.event.addListener(marker, 'mouseover', (function(marker, s) {
                return function(evt){
                    var markerPos = marker.getPosition();
                    infoBox.setPosition(markerPos);
                    infoBox.setContent(s);
                       infoBox.open(mapObject, marker);
                    }
               })(marker, s));
              google.maps.event.addListener(mapObject, 'click', function() {
                 infoBox.close();
               });

         google.maps.event.addListener(marker, 'click', (function(marker){
            return function(evt){
             console.log("hey, that's me", marker.id);
             var url = 'map.html';
             if (url.indexOf('?') === -1)
                url += '?text' + marker.id;
            else
                url += '&text' + marker.id;
            window.location.replace(url);
             }
            })(marker));
            }
        }
        , error: function(res) {

            console.log("NOOOOOOOOOOOOOOOOOOOOOOOOOOO");
        }
    });
}
    getRequest();

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRymwuSu-hyqAYloKTusBQ6kNOSJTM0a8&callback=initMap">
</script>

</body>
</html>