Google Maps

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var routes = [{
	"lat": 37.3335423,
	"lng": -121.9132912,
	"billing_id": 31
},
{
	"lat": 37.3358189,
	"lng": -121.8877351,
	"billing_id": 32
}];
var myCenter = new google.maps.LatLng(routes[routes.length / 2].lat, routes[routes.length / 2].lng);
var index = 0;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
    var mapProp = {
        center: myCenter,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var intervalID = setInterval(function() {
    	if(markers.length !== 0) {
        	//markers[0].setMap(null);
            //markers.pop();
    	}
        if (index === routes.length-1) {
        	console.log("done with traversal;")
            clearInterval(intervalID);
        }
        myCenter = new google.maps.LatLng(routes[index].lat, routes[index].lng);
        index++;
        console.log("hello");
        var marker = new google.maps.Marker({
            position: myCenter,
            animation:google.maps.Animation.BOUNCE,
            map: map
        });
        markers.push(marker);
        //marker.setMap(map);
    }, 2007);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:1800px;height:1000px;"></div>
</body>
</html>