Google maps - add road directions, circle, postal code areas

Question

I got a basic map running using google maps v3

Next features that I would like to add include:

• draw line as road directions instead of direct point to point polyline
• draw a circle 75 km circle around from a specific point
• highlight the postal code of a specific point.

I Would appreciate people's thoughts on these topics

var geocoder;
var map;

function fnPresentMap()
 {
 geocoder = new google.maps.Geocoder();  

 var locationArray = new Array();
        locationArray[0] = new Array();
        locationArray[1] = new Array();

        locationArray[0][0] = document.getElementById('LAT_OUT_1').innerHTML;
        locationArray[0][1] = document.getElementById('LON_OUT_1').innerHTML;

        locationArray[1][0] = document.getElementById('LAT_OUT_2').innerHTML;
        locationArray[1][1] = document.getElementById('LON_OUT_2').innerHTML;

  var latlng = new google.maps.LatLng(44, -75);

  var myOptions = {
   zoom: 8,
   center: latlng,
   mapTypeControl: true,
   mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
   navigationControl: true,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };

        map = new google.maps.Map(document.getElementById("map"), myOptions);
        var myLatlng;
  var image_name;

        for (var count = 0; count <  locationArray.length; ++count){       
    image_name = "img/marker_"+(count+1)+".png";
    myLatlng = new google.maps.LatLng(locationArray[count][0],locationArray[count][1]);
                var marker = new google.maps.Marker({
                        position: myLatlng, 
                        map: map,
      icon: image_name      
                });
        }

  // re-center
  var centerLocation = new google.maps.LatLng(locationArray[0][0],locationArray[0][1]);
   map.setCenter(centerLocation);

  // show line
  var points = [
                  new google.maps.LatLng(locationArray[0][0],locationArray[0][1]),
                  new google.maps.LatLng(locationArray[1][0],locationArray[1][1])
        ];

   var line = new google.maps.Polyline({
          map: map,
          path: points,
          strokeColor: "#FF0000",
          strokeWeight: 2,
          strokeOpacity: 1.0
        });



  }

Answer 1

• To render road directions between two specific points, you need to use the Google Maps API directions service. If you check out the documentation you will find pretty straightforward examples to make a directions request and render the results on a map as a line between the two points.
• I think the best approach for drawing a circle around a point is to draw a polygon with enough points to approximate a circle. You can find a good example of this here.
• To highlight the postcode at a specific point, I suggest you use the Google Maps API reverse geocoding service (convert from a latitude/longitude to a human readable address). You can extract the postcode from the JSON response you get back and then display it on the map using a infoWindow or some other kind of overlay.