Solved

Enter Address and have Google Maps Directions appear on submit

Posted on 2014-03-04
21
724 Views
Last Modified: 2014-04-12
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.
0
Comment
Question by:Lanmarkian
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
  • 3
  • +1
21 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 39903726
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
 

Author Comment

by:Lanmarkian
ID: 39903748
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
 
LVL 58

Expert Comment

by:Gary
ID: 39903776
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 33

Expert Comment

by:Big Monty
ID: 39903784
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
 

Author Comment

by:Lanmarkian
ID: 39903877
OK - How can I hide/show this div when the user hits submit?
0
 

Author Comment

by:Lanmarkian
ID: 39903878
The div would contain the iframe.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39903889
Everything is contained in the iframe, you cannot be hiding/showing it.
0
 

Author Comment

by:Lanmarkian
ID: 39904062
That's the point of the question. Then the iframe method will not work. Any other thoughts?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39904145
Are we talking about the link I posted, there is no iframe.  Did you even try it?
0
 

Author Comment

by:Lanmarkian
ID: 39904337
Cathill - I did look at that, but I don't want the map viewable until after the user enters directions.
0
 

Author Comment

by:Lanmarkian
ID: 39904344
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
 
LVL 58

Expert Comment

by:Gary
ID: 39904367
Then I suggest you start reading their API documentation
https://developers.google.com/maps/documentation/directions/
0
 

Author Comment

by:Lanmarkian
ID: 39921417
Still having trouble even with API - maybe I just don't know enough. Are there any samples of this being done?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39921442
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39921808
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
 
LVL 58

Expert Comment

by:Gary
ID: 39921823
Where in that linked page does it say v2
Where in your example are the directions?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39921871
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
 
LVL 58

Expert Comment

by:Gary
ID: 39921902
Simple fix - change it to 3, but it seems to be using v3 regardless
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39922957
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
object method as an event handler 8 77
problems with widget background image 9 34
close window in firefox 3 37
Selenium cssSelector and attribute 5 11
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question