Mapping Way points in google map.. with your configurable markers and points using javascript !

      // This example creates a simple polygon representing the Bermuda Triangle.
        // When the user clicks on the polygon an info window opens, showing
        // information about the polygon's coordinates.
        var directionsDisplay;
        //  var directionsService = new google.maps.DirectionsService();
        var map;
        var size;
        function initialize_map() {

            directionsDisplay = new google.maps.DirectionsRenderer();
            var Bang = new google.maps.LatLng(12.9583217, 77.6378104);
            var mapOptions = {
                zoom: 6,
                center: Bang
            }
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            if (document.getElementById("<%= hdnStartPoint.ClientID %>").value == '1123') {
                var marker = new google.maps.Marker({
                    position: Bang,
                    map: map,
                    title: "Hello World!"
                });

                var contentString = '<div id="content">' + '<p>Banglore</p>' + '</div>';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            }

            directionsDisplay.setMap(map);
        }
        function DeriveLatandLong(latandlong) {
            //Maiking points from lantlong
            var point;
            if (latandlong.length > 0) {

                var latandlongarr = latandlong.split(',');
                point = new google.maps.LatLng(latandlongarr[0], latandlongarr[1]);
            }
            return point
        }
        function MakearrayforWayPoints(latandlongcoll) {
            //Maiking Waypoints.
            var waypts = [];
            if (latandlongcoll.length > 0) {
                var latandlongarr = latandlongcoll.split('/');

                for (var i = 0; i < latandlongarr.length; i++) {

                    var latandlongpoint = latandlongarr[i].split(',');
                    var point = new google.maps.LatLng(latandlongpoint[0], latandlongpoint[1]);
                    waypts.push({
                        location: point,
                        stopover: true
                    });
                }
            }
            return waypts
        }
        function getInfowindowString() {

            //to get text for infowindow
            var hdnmarkerinfo = document.getElementById("<%= hdnmarkerinfo.ClientID %>").value;
            hdnmarkerinfoarr = hdnmarkerinfo.split(',');

            return hdnmarkerinfoarr
        }
        function calcRoute() {
            var wayptsnull = [];
            var directionsService = new google.maps.DirectionsService();

            initialize_map();
            var start = DeriveLatandLong(document.getElementById("<%= hdnStartPoint.ClientID %>").value);

            var end = DeriveLatandLong(document.getElementById("<%= hdnendpoint.ClientID %>").value);
            var waypts = [];
            waypts = MakearrayforWayPoints(document.getElementById("<%= hdnwaypoints.ClientID %>").value);

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0];
                    var summaryPanel = document.getElementById('directions_panel');
                    summaryPanel.innerHTML = '';
                    // For each route, display summary information.
                    //For creating markers
                    var infotext = getInfowindowString();
                    var legs = response.routes[0].legs;
                    for (var i = 0; i < legs.length; i++) {
                        var markerletter = "A".charCodeAt(0);
                        markerletter += i;
                        markerletter = String.fromCharCode(markerletter);
                        createMarker(directionsDisplay.getMap(), legs[i].start_location, "Point" + i, "Here at " + infotext[i] + "<br>" + legs[i].start_address, markerletter);
                    }
                    var i = legs.length;
                    var markerletter = "A".charCodeAt(0);
                    markerletter += i;
                    markerletter = String.fromCharCode(markerletter);
                    createMarker(directionsDisplay.getMap(), legs[legs.length - 1].end_location, "Point" + i, "Here at " + infotext[i] + "<br>" + legs[legs.length - 1].end_address, markerletter);
                    //For creating markers

                    //For creating DIV with details

                    for (var i = 0; i < route.legs.length; i++) {
                        var routeSegment = i + 1;
                        summaryPanel.innerHTML += '<b>Route No: ' + routeSegment + '</b><br>';
                        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
                        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
                        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
                    }
                }
            });

            //For creating DIV with details
            //hiding the markers by mr wapoint
            directionsDisplay.setOptions({
                draggable: false,
                suppressInfoWindows: false,
                suppressMarkers: true
            })
            //hiding the markers by mr wapoint
        }
        var infowindow = new google.maps.InfoWindow(
         {
             size: new google.maps.Size(50, 50)
         });

        function createMarker(map, latlng, label, html, color) {
            // alert("createMarker("+latlng+","+label+","+html+","+color+")");
            var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
            // This marker is 20 pixels wide by 34 pixels tall.
            new google.maps.Size(20, 34),
            // The origin for this image is 0,0.
            new google.maps.Point(0, 0),
            // The anchor for this image is at 9,34.
           new google.maps.Point(9, 34));
            var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
            // The shadow image is larger in the horizontal dimension
            // while the position and offset are the same as for the main image.
           new google.maps.Size(37, 34),
           new google.maps.Point(0, 0),
           new google.maps.Point(9, 34));
            // Shapes define the clickable region of the icon.
            // The type defines an HTML &lt;area&gt; element 'poly' which
            // traces out a polygon as a series of X,Y points. The final
            // coordinate closes the poly by connecting to the first
            // coordinate.
            var iconShape = {
                coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
                type: 'poly'
            };

            var contentString = '<b>' + label + '</b><br>' + html;
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                shadow: iconShadow,
                icon: getMarkerImage(color),
                shape: iconShape,
                title: label,
                zIndex: Math.round(latlng.lat() * -100000) << 5
            });
            marker.myname = label;

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


        function getMarkerImage(iconStr) {

            var icons = new Array();
            icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png", new google.maps.Size(20, 34), new google.maps.Point(0, 0), new google.maps.Point(9, 34));
            if ((typeof (iconStr) == "undefined") || (iconStr == null)) {
                iconStr = "red";
            }
            if (!icons[iconStr]) {
                icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/marker" + iconStr + ".png",
                // This marker is 20 pixels wide by 34 pixels tall.
            new google.maps.Size(20, 34), new google.maps.Point(0, 0), new google.maps.Point(9, 34));
                // The origin for this image is 0,0.

                // The anchor for this image is at 6,20.

            }
            return icons[iconStr];

        }