Google Maps Directions From A Postcode To A Preset Postcode

You Will Need To Change The var end = 'ST1 3DW'; To Your Destination Postcode, You Will Also Need To Change The (53.023022, -2.178158) To Your Destination Postcode latitude and longitude You Can Do This Here Get Latitude And Longitude From Postcode.

Result

Enter Your Postcode:


<!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>

Available For Freelance:

I Am Available To Work For You Freelance, See My Skills To See If I Can Help Your Project, If I Can Help You Then Please Contact Me.

My Rates Start From £180 A Day, Discount Prices For Regular Clients And Work Over 3 Days.

I Started To Learn Web Development In 2008, I Did A Few Open University Courses While Working Full Time In The Building Trade, I Managed To Get A Diploma With Distinction

Request A Tutorial

If You Are Having Difficulty With The Development Of Your Website Or If You Are Just Starting Out Leaning Web Development And You Think I Can Help You Then Request A Tutorial, I Will Do My Best To Help You

I Dont Charge For My Services If I Can Help You With Something That Can Be Be Fixed In A Few Minutes.

Advertise

If You Would Like To Advertise On This Site Then Please Contact Me, You Will Be Given Login Details To See What Day And Where Clicks Have Come From.

Prices Start From £10 A Month With Discounts Available For 3 Months Or More.

You Can Either Send Me The Banner Advert That You Have Designed Or From £10 I Can Have Designer Design A Banner For You.

Please Leave A Comment And A Rating





image

Chris Gave This Code Rating

Google Maps being used to find directions to a destination from your entered postcode you will need to change the preset post code

image

Chris Gave This Code Rating

you will also need to change 53.023022, -2.178158 i used to convert the postcode, hope it helps http://www.pauldjohnson.co.uk/content/uk-postcode-geocoder-returning-latitude-longitude-and-plots-map

www.codecaven.co.uk image 5.00 out of 5 based on 2 ratings. 2 user reviews.

My Skills:

  • PHP 5
  • JavaScript
  • Jquery
  • XHTML Validation
  • KineticJS
  • HTML5
  • CSS - CSS3
  • SEO

My Social Networks:

  • facebook youtube