How to draw Polyline on Google Map

Could some 开发者_StackOverflow中文版one point me how to draw a simple polyline between two geo coding point with custom color.

Everything you need is here:

http://code.google.com/apis/maps/documentation/javascript/examples/index.html

At a high level you want to do this:

1. Make two requests (using a Geocoder) to geocode two points. You will pass a function to each request that will be called back once the data is available.

2. You need to wait until BOTH functions complete. You could have two booleans "oneDone, twoDone" and set them to true once the function calls back.

3. Draw a polyline between the points using the code in the polyline-simple example.

To draw line between two points using the following function to which I pass the map and lat and long in the first point and second point.

var mapOptions = {
    zoom: zoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map-canvas_'+id), mapOptions);    

function poliLines(map, latPointBefore, lonPointBefore, latPointAfter, lonPointAfter){

        var routes = [
          new google.maps.LatLng(latPointBefore, lonPointBefore)
          ,new google.maps.LatLng(latPointAfter, lonPointAfter)
        ];

        var polyline = new google.maps.Polyline({
           path: routes
           , map: map
           , strokeColor: '#ff0000'
           , strokeWeight: 5
           , strokeOpacity: 0.5
           , clickable: false
       });

}