Enter Address and have Google Maps Directions appear on submit

Here are the steps that I need.

- Go to website, only see form field that says "Enter your address"
- On submit, below the form field, the user now sees a map and the directions listed out. (the destination address has to already be pre-populated)

How can I accomplish this? Are there any samples out there? I can't seem to find anything online.

Thank you.
LanmarkianAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Tom BeckConnect With a Mentor Commented:
My example just needed a panel to hold the directions. The written directions are always provided by the Directions Service.  
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      html, body, #map-directions {
        height: 100%;
		width: 100%;
        margin: 0 auto;
        padding: 0px
      }
	  
      #directions-panel {
        height: 70%;
        float: left;
        width: 30%;
        overflow: auto;
		min-width: 300px
      }

      #map-canvas {
		height: 70%;
		width: 50%;
		float: left;
		min-width: 400px
      }
	  
	  #start, #end {
		width: 300px
	  }
	  
	  #map-directions {		  	  		
		position: absolute;
		left: -9999px
	  }	  

      @media print {
        #map-canvas {
          height: 500px;
          margin: 0;
        }

        #directions-panel {
          float: none;
          width: auto;
        }
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
  document.getElementById("map-directions").style.left = 0;
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>

<body>
<label for="pointA">Point A</label>
<input type="text" id="start" /><br />
<label for="pointB">Point B</label>
<input type="text" id="end" />
<input type="button" value="Submit" onclick="calcRoute()" />
<div id="map-directions">
    <div id="map-canvas"></div>
    <div id="directions-panel"></div>
</div>
</body>
</html>

Open in new window

0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
here's a tutorial that allows you to enter in an address and it'll display directions to the address on your site:

http://charliesaidthat.com/digital/web-design/all-small-businesses-need-this-how-to-add-google-map-directions-for-customers-to-your-website/
0
 
LanmarkianAuthor Commented:
No, that takes you to google maps site. I want everything embedded on my website. When the user enters their address, the map and directions appear directly below the form field.

Please re-read my original post.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
my apologies, i did misread the question...this method should still work thought, just embed the url into an iFrame on your site and it should work.

if that doesnt do the trick, try looking at their API:

https://developers.google.com/maps/documentation/javascript/basics
0
 
LanmarkianAuthor Commented:
OK - How can I hide/show this div when the user hits submit?
0
 
LanmarkianAuthor Commented:
The div would contain the iframe.
0
 
GaryCommented:
Everything is contained in the iframe, you cannot be hiding/showing it.
0
 
LanmarkianAuthor Commented:
That's the point of the question. Then the iframe method will not work. Any other thoughts?
0
 
GaryCommented:
Are we talking about the link I posted, there is no iframe.  Did you even try it?
0
 
LanmarkianAuthor Commented:
Cathill - I did look at that, but I don't want the map viewable until after the user enters directions.
0
 
LanmarkianAuthor Commented:
I also need full control over styling for the form etc. and I have used this widget in the past - There isn't a way to get rid of the drop down etc.
0
 
GaryCommented:
Then I suggest you start reading their API documentation
https://developers.google.com/maps/documentation/directions/
0
 
LanmarkianAuthor Commented:
Still having trouble even with API - maybe I just don't know enough. Are there any samples of this being done?
0
 
Tom BeckCommented:
That's not a good example. It uses Google Maps v2 instead of v3 and makes getting directions far more complicated. Google API v3 provides a Directions Service that makes it much easier.

Complete working example based on these instructions:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
		width: 100%;
        margin: 0px;
        padding: 0px
      }
	  #map-canvas {
		position: absolute;
		left: -9999px
	  }
	  #start, #end {
		  width: 300px
	  }
	  
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
  document.getElementById("map-canvas").style.left = 0;
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>

<body>
<label for="pointA">Point A</label>
<input type="text" id="start" /><br />
<label for="pointB">Point B</label>
<input type="text" id="end" />
<input type="button" value="Submit" onclick="calcRoute()" />
<div id="map-canvas"></div>
</body>
</html>

Open in new window

Here's another good example that adds auto-complete to the entering of addresses.
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?csw=1
0
 
GaryCommented:
Where in that linked page does it say v2
Where in your example are the directions?
0
 
Tom BeckCommented:
line 12, "v=2"
http://maps.google.com/?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw

You mean printed out directions? I missed that part of the question.
0
 
GaryCommented:
Simple fix - change it to 3, but it seems to be using v3 regardless
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.