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.