jquery Google Maps live tracking

Initial answer for http://stackoverflow.com/questions/27088420/jquery-google-maps-live-tracking

by johannpickard

HTML

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&amp;sensor=false"></script>
<div id="googleMap"></div>

<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrgGGbiHgV4n7ykSNmc8ZpxBv2HIbe2xg"></script>

CSS

#googleMap{
    width:500px;
    height:380px;
    border:1px solid #ddd;
}

JavaScript

var x = new google.maps.LatLng(52.395715, 4.888916);
var stavanger = new google.maps.LatLng(58.983991, 5.734863);
var amsterdam = new google.maps.LatLng(52.395715, 4.888916);
var london = new google.maps.LatLng(51.508742, -0.120850);

var realtimePos = new google.maps.LatLng(55.689853, 5.3118895);

function initialize() {
    console.log('initializing');
    var mapProp = {
        center: x,
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    var myTrip = [stavanger, amsterdam, london, stavanger];
    var flightPath = new google.maps.Polyline({
        path: myTrip,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.4
    });

    var airplane = new google.maps.Marker({
        position: stavanger,
        map: map
    });
    
    //  simulate the getting of new realtime info
    var step = 0,
        steps = 10;
    setInterval(function(){
        var startPos = stavanger,
            endPos = amsterdam,
            difLat = (endPos.lat() - startPos.lat())*step/steps,
            difLng = (endPos.lng() - startPos.lng())*step/steps;
        
        realtimePos = new google.maps.LatLng(startPos.lat() + difLat, startPos.lng() + difLng);
        airplane.setPosition( realtimePos );
        step = (step+1) % steps;
    }, 1000);
    
    flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);