<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io();
    var map = false;
    var markers = {};
    var markerTimeouts = {};

    $(window).load(function() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(30, 16),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            panControl: false,
            streetViewControl: false,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.TOP_RIGHT
            },
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    });

    function createMarker(name, lng, lat) {
        var circle = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                icon: "/img/marker_red.png?v=2",
                title: name
        });

        markers[name] = circle;

        setTimeout(function() { destroyMarker(name); }, 3000);
    }

    function destroyMarker(name) {
        markers[name].setMap(null);
        delete markers[name];
    }

    socket.on('message', function(data){
        if (!map) {
            return;
        }
        else {
            createMarker(data.name, data.lon, data.lat);
        }
    });
    </script>