Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 90%; width: 90% }
</style>
​
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->
    
<script type="text/javascript">
var line;
​
var map;
var pointDistances;
​
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(2.881766, 101.626877),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
​
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
​
    var lineCoordinates = [
        new google.maps.LatLng(2.86085, 101.6437),
        new google.maps.LatLng(2.87165, 101.6362),
        new google.maps.LatLng(2.880783, 101.6273),
        new google.maps.LatLng(2.891517, 101.6201),
        new google.maps.LatLng(2.8991, 101.6162), 
        new google.maps.LatLng(2.915067, 101.6079)
    ];
    
    map.setCenter(lineCoordinates[0]);
    
    // point distances from beginning in %
    var sphericalLib = google.maps.geometry.spherical;
​
    /*
    pointDistances = [];
    var pointZero = lineCoordinates[0];
    var wholeDist = sphericalLib.computeDistanceBetween(
                        pointZero,
                        lineCoordinates[lineCoordinates.length - 1]);
    
    for (var i = 0; i < lineCoordinates.length; i++) {
        pointDistances[i] = 100 * sphericalLib.computeDistanceBetween(
                                        lineCoordinates[i], pointZero) / wholeDist;
        console.log('pointDistances[' + i + ']: ' + pointDistances[i]);
    }
    console.log('whole distance: ' + wholeDist);
    */
    
    pointDistances = [0];
    for (var i = 1; i < lineCoordinates.length; i++) {
        var partialDistance = sphericalLib.computeDistanceBetween(
                                            lineCoordinates[i], 
                                            lineCoordinates[i - 1]);
        pointDistances[i] = pointDistances[i - 1] + partialDistance;
        console.log('pointDistances[' + i + ']: ' + pointDistances[i]);
    }
    // convert to percentage offset
    wholeDist = pointDistances[pointDistances.length - 1];
    for (var i = 0; i < lineCoordinates.length; i++) {
        pointDistances[i] = 100 * pointDistances[i] / wholeDist;
        console.log('pointDistances[' + i + ']: ' + pointDistances[i]);
    }
    console.log('whole distance: ' + wholeDist);
​
    // define polyline
    var lineSymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 6,
        strokeColor: '#393'
    };
​
    line = new google.maps.Polyline({
        path: lineCoordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        icons: [{
            icon: lineSymbol,
            offset: '100%'
        }],
        map: map
    });
​
    animateCircle();
}
​
​
var id;
function animateCircle() {
    var count = 0;
    var offset;
    var sentiel = -1;
    
    id = window.setInterval(function () {
        count = (count + 1) % 200;
        offset = count /2;
        
        for (var i = pointDistances.length - 1; i > sentiel; i--) {
            if (offset > pointDistances[i]) {
                console.log('create marker');
                var marker = new google.maps.Marker({
                    icon: {
                        url:"https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
                        size: new google.maps.Size(7,7),
                        anchor: new google.maps.Point(4,4)
                    },
                    position: line.getPath().getAt(i),
                    title: line.getPath().getAt(i).toUrlValue(6),
                    map: map
                });
                
                sentiel++;
                break;
            }
        }
        
        // we have only one icon
        var icons = line.get('icons');
        icons[0].offset = (offset) + '%';
        line.set('icons', icons);
        
        if (line.get('icons')[0].offset == "99.5%") {
            icons[0].offset = '100%';
            line.set('icons', icons);
            window.clearInterval(id);
        }
        
    }, 20);
}
​
google.maps.event.addDomListener(window, 'load', initialize);
​
</script>
</head>
​
<body>
    <div id='map'></div>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
antojurkovicpro
0viewers