Google maps enter your postcode and it will give you directions to a preset postcode

index.html

    <!DOCTYPE html> 
      <html> 
      <head> 
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
      <title>Google Maps Postcode To Destination Working Example</title> 
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
      <script type="text/javascript">
      poimg = "http://www.thepotteries.org/photo_wk/2009/spitfire/spitfire_museum.jpg";
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
      
      function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var UK = new google.maps.LatLng(53.023022, -2.178158);
      var myOptions = {
      zoom:15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: UK
      }
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById("directionsPanel"));
      }
     var pos, marker, content, infowindow;
     infowindow = new google.maps.InfoWindow();
      pos = new google.maps.LatLng(53.023022, -2.178158);
      marker = new google.maps.Marker({
      position: pos,
      map: map,
      animation: google.maps.Animation.DROP
      });
      
     function calcRoute() {
      var start = document.getElementById("start").value;
      var end = 'ST1 3DW';
     var request = {
      origin:start, 
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      }
      
      });
     content = '<div style="height: 142px;width: 270px;"><strong>The Potteries Museum & Art Gallery‎</strong><img src="' + poimg + '" width="100" style="float:left;margin-right:5px"><div><div style="font-weight:normal;font-size:small;"> The Potteries Museum & Art Gallery‎<br />Bethesda Street<br />Cultural Quarter, <br />Stoke-on-Trent<br /> ST1 3DW<br />01782 232323</div></div></div>';
     infowindow = new google.maps.InfoWindow({
      content: content
      });
     infowindow.open(map, marker);
      }
      </script> 
      <style type="text/css">
      body {
      text-align: center;
      background-color: #f3f3f3;
      }
      .container {
      width: 980px;
      margin: 10px auto;
      text-align: left;
      }
      #input {
      background-color: #F8F8F8;
      border: solid 1px #E8E8E8;
      float: right;
      padding:5px;
      text-align:right;
      }
      .btn
      {
      border: 1px solid #777777;
      background: #6e9e2d;
      color: white;
      font: bold 11px 'Trebuchet MS';
      padding: 4px;
      cursor: pointer;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      }
      </style>
      </head> 
      <body onLoad="initialize()"> 
      <div class="container">
      <div id="directionsPanel"></div> 
      <div id="input">
      <p><strong>Enter Your Postcode: </strong>
      <input id="start" type="text" > </p>
      <p><input type="button" class="btn" onClick="calcRoute();" value="View Directions"></p>
      </div> 
      <div id="map_canvas" style="float:left;width:650px; height: 700px"></div> 
      </div>
      </body> 
      </html>