Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Find routes between two points in google map

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 130
    Comment on it

    We can easily show the route which contain all stops including start point and end point in Google map.
    So to find stops we need to create markers json string contains all the stops with their latitude and longitude including start point and end point. Below is the code which will display the routes from any location to any location just only need to add lat and long inside markers variable and you can see the route accordingly and assign it to mydiv element which renders the Google map.

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var markers = [
                {
    
                    "lat": '18.641400',
                    "lng": '72.872200',
    
                }
            ,
                {
    
                    "lat": '18.964700',
                    "lng": '72.825800',
    
                }
            ,
                {
    
                    "lat": '18.523600',
                    "lng": '73.847800',
    
                }
    ];
    
    
            window.onload = function () {
                alert(markers[0].lat);
                var mapOptions = {
                    center: new google.maps.LatLng(0, 0),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("mymap"), mapOptions);
                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    lat_lng.push(myLatlng);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: data.title
                    });
                    latlngbounds.extend(marker.position);
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                }
                map.setCenter(latlngbounds.getCenter());
                map.fitBounds(latlngbounds);
    
                //***********ROUTING****************//
    
                //Intialize the Path Array
                var path = new google.maps.MVCArray();
    
                //Intialize the Direction Service
                var service = new google.maps.DirectionsService();
    
                //Set the Path Stroke Color
                var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
    
                //Loop and Draw Path Route between the Points on MAP
                for (var i = 0; i < lat_lng.length; i++) {
                    if ((i + 1) < lat_lng.length) {
                        var src = lat_lng[i];
                        var des = lat_lng[i + 1];
                        path.push(src);
                        poly.setPath(path);
                        service.route({
                            origin: src,
                            destination: des,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        }, function (result, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                    path.push(result.routes[0].overview_path[i]);
                                }
                            }
                        });
                    }
                }
            }
        </script>
    <div id="mymap" style="width: 500px; height: 500px">
    </div>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: