Untitled

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

    <script>

        var directionDisplay;
        var directionsService;
        var stepDisplay;

        var position;
        var marker = [];
        var polyline = [];
        var poly2 = [];
        var poly = null;
        var startLocation = [];
        var endLocation = [];
        var timerHandle = [];

        var speed = 0.000005, wait = 1;
        var infowindow = null;

        var myPano;
        var panoClient;
        var nextPanoId;

        var startLoc = new Array();
        startLoc[0] = 'San Francisco, CA';
        startLoc[1] = 'Oakland, CA';
        startLoc[2] = 'Oakland, CA';
        startLoc[3] = 'Hayward, CA';

        var endLoc = new Array();
        endLoc[0] = 'San Leandro, CA';
        endLoc[1] = 'Orinda, CA';
        endLoc[2] = 'Hayward, CA';
        endLoc[3] = 'Concord, CA';

        var Colors = ["#FF0000", "#00FF00", "#0000FF"];


        function initialize() {
            var mapProp = {
                center:new google.maps.LatLng(50.126550, 8.686689),
                zoom:12,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }
        google.maps.event.addDomListener(window, 'load', initialize);


        function setRoutes() {
            var directionsDisplay = new Array();

            for (var i = 0; i < startLoc.length; i++) {
                var rendererOptions = {
                    map: map,
                    suppressMarkers: true,
                    preserveViewport: true
                }
                directionsService = new google.maps.DirectionsService();
                var travelMode = google.maps.DirectionsTravelMode.DRIVING;

                var request = {
                    origin: startLoc[i],
                    destination: endLoc[i],
                    travelMode: travelMode
                };

                directionsService.route(request, makeRouteCallback(i, directionsDisplay[i]));
            }

            function startAnimation(index) {
                if (timerHandle[index]) clearTimeout(timerHandle[index]);
                eol[index]=polyline[index].Distance();
                map.setCenter(polyline[index].getPath().getAt(0));

                poly2[index] = new google.maps.Polyline({path: [polyline[index].getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3});

                timerHandle[index] = setTimeout("animate("+index+",50)",2000);  // Allow time for the initial map display
            }

            function makeRouteCallback(routeNum, disp) {
                if (polyline[routeNum] && (polyline[routeNum].getMap() != null)) {
                    startAnimation(routeNum);
                    return;
                }
                return function(response, status){

                    if (status == google.maps.DirectionsStatus.OK){

                        var bounds = new google.maps.LatLngBounds();
                        var route = response.routes[0];
                        startLocation[routeNum] = new Object();
                        endLocation[routeNum] = new Object();


                        polyline[routeNum] = new google.maps.Polyline({
                            path: [],
                            strokeColor: '#FFFF00',
                            strokeWeight: 3
                        });

                        poly2[routeNum] = new google.maps.Polyline({
                            path: [],
                            strokeColor: '#FFFF00',
                            strokeWeight: 3
                        });


                        // For each route, display summary information.
                        var path = response.routes[0].overview_path;
                        var legs = response.routes[0].legs;


                        disp = new google.maps.DirectionsRenderer(rendererOptions);
                        disp.setMap(map);
                        disp.setDirections(response);


                        //Markers
                        for (i=0;i<legs.length;i++) {
                            if (i == 0) {
                                startLocation[routeNum].latlng = legs[i].start_location;
                                startLocation[routeNum].address = legs[i].start_address;
                                // marker = google.maps.Marker({map:map,position: startLocation.latlng});
                                marker[routeNum] = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
                            }
                            endLocation[routeNum].latlng = legs[i].end_location;
                            endLocation[routeNum].address = legs[i].end_address;
                            var steps = legs[i].steps;

                            for (j=0;j<steps.length;j++) {
                                var nextSegment = steps[j].path;
                                var nextSegment = steps[j].path;

                                for (k=0;k<nextSegment.length;k++) {
                                    polyline[routeNum].getPath().push(nextSegment[k]);
                                    //bounds.extend(nextSegment[k]);
                                }

                            }
                        }

                    }

                    polyline[routeNum].setMap(map);
                    //map.fitBounds(bounds);
                    startAnimation(routeNum);

                } // else alert("Directions request failed: "+status);
            }
        }

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
            }

            setRoutes();
        }

        function createMarker(latlng, label, html) {
            var contentString = '<b>'+label+'</b><br>'+html;
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "A marker"
            })

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(contentString);
                infowindow.open(map, marker);
            });

            return marker;
        }


        var lastVertex = 1;
        var stepNum = 0;
        var step = 50;
        var tick = 100;
        var eol = [];

        function updatePoly(i,d) {
            // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
            if (poly2[i].getPath().getLength() > 20) {
                poly2[i]=new google.maps.Polyline([polyline[i].getPath().getAt(lastVertex-1)]);
                // map.addOverlay(poly2)
            }

            if (polyline[i].GetIndexAtDistance(d) < lastVertex+2) {
                if (poly2[i].getPath().getLength()>1) {
                    poly2[i].getPath().removeAt(poly2[i].getPath().getLength()-1)
                }
                poly2[i].getPath().insertAt(poly2[i].getPath().getLength(),polyline[i].GetPointAtDistance(d));
            } else {
                poly2[i].getPath().insertAt(poly2[i].getPath().getLength(),endLocation[i].latlng);
            }
        }

        function animate(index,d) {
            if (d>eol[index]) {

                marker[index].setPosition(endLocation[index].latlng);
                return;
            }
            var p = polyline[index].GetPointAtDistance(d);

            //map.panTo(p);
            marker[index].setPosition(p);
            updatePoly(index,d);
            timerHandle[index] = setTimeout("animate("+index+","+(d+step)+")", tick);
        }

        function showPosition(position) {
            document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude +
                    "<br>Longitude: " + position.coords.longitude;
            lat = position.coords.latitude;
            lon = position.coords.longitude;
            latlon = new google.maps.LatLng(lat, lon)
            mapholder = document.getElementById('googleMap');

            var myOptions = {
                center:latlon,zoom:14,
                mapTypeId:google.maps.MapTypeId.ROADMAP,
                mapTypeControl:false,
                navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
            }

            var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
            var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
            //latlon2 = new google.maps.LatLng(lat-20, lon+40);
            //var marker2 = new google.maps.Marker({position:new google.maps.LatLng(lat-20, lon+40),map:map,title:"This is the other guy!"});
            //var marker3 = new google.maps.Marker({position:new google.maps.LatLng(lat-1, lon+2),map:map,title:"This is the other guy!"});
            //var marker4 = new google.maps.Marker({position:new google.maps.LatLng(lat+1, lon-2),map:map,title:"This is the other guy!"});
        }
    </script>

    <link rel="stylesheet" href="css/main.css">

</head>

<body>
<p id="demo">test</p><br>
<button type="button" onclick="getLocation()">Locate me</button> <br>
<input type="text"><button>Search address</button>
<div id="googleMap" style="width:1024px;height:687px; position: relative; top: 81px; left: -8px;"></div>

</body>
</html>