sending lat and long to google maps and returning directions on my web page.

@Nicholas_DiazApr 05.2013

if you look at this page here…

~~[url]~~http://www.ogsolutions.us/aziz/directions.php[/url]

I have a google map in the center of the page

at the top of the page I have a form field that auto populates yours lat and long.

When you click the button submit it runs a file called directions.php.

I want this file to take the lat and long of the users position and then map them out

turn by turn directions in to the form field to the left you can see on the page.

I have been working on this all day and I have no clue how to set up the directions.php file.

I assume it needs to post the lat and long and waypoint address the GET the information back from

the server after its interpreted.

if anyone can help me i would appreciate it.

to post a comment

PHP

14 Comments(s) _↴

@ajm61894Apr 06.2013 — #On the [B]directions.php[/B] page, the form that auto populates with the user's latitude and longitude uses the action page [B]getDirections.php[/B] which is currently blank. The blank action page is why nothing happens when you press submit (obviously).

If I were you... I would remove the map and directions list box from the [B]directions.php[/B] page, leaving just the latitude/longitude form.

Then, on the [B]getDirections.php[/B] page, I would add the following to take the latitude and longitude from the form:

[code=php]
 <?
 
 $latitude = $_POST["lat"];
 $longitude = $_POST["longitude"];
 
 $lat_long = $latitude.",".$longitude;
 
 ?>
 [/code]

And I would then use jQuery to create the directions map and list using the new lat/long data. This should be sufficient:

[code=html]
 <script type="text/javascript">
 
 $("#test").gmap3({
 getroute:{
 options:{
 origin:"<? echo $lat_long; ?>",
 destination:"32.794213,-96.618572",
 travelMode: google.maps.DirectionsTravelMode.DRIVING
 },
 callback: function(results){
 if (!results) return;
 $(this).gmap3({
 map:{
 options:{
 zoom: 10,
 }
 },
 directionsrenderer:{
 container: $(document.createElement("div")).addClass("googlemap").insertAfter($("#test")),
 options:{
 directions:results
 }
 }
 });
 }
 }});
 
 </script>
 
 <div id="test"></div>
 [/code]

This is just a general code. Most of the information you're looking for on how to do specific things can be found using the following websites:
[LIST]

[*]Google's API Development Page explains about the Google API and the specific options you can change.

[*]Gmap3 is a jQuery plugin for Google Maps that is necessary for this to work (and they provide well written Documentation).

[/LIST]Let me know if this works or if you have any questions/concerns. Hope this helps! ?

@Nicholas_DiazauthorApr 06.2013 — #Man thanks a ton. that makes perfect sense to me... This is the last piece of the puzzle.

I dont think I am adding your script correctly. should i call the div test cause thats what you

made it in the javascript?

@ajm61894Apr 06.2013 — #Did you download Gmap3 to your web server? The jQuery library must be added to your web server and then referenced on the [B]getDirections.php[/B] page.

@Nicholas_DiazauthorApr 06.2013 — #so you mean all i need from that download is the three js files?

then reference them

<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="scripts/gmap3.min.js"></script>

<script type="text/javascript" src="scripts/gmap3.js"></script>

then copy your code and paste in the places you told me too?

@Nicholas_DiazauthorApr 06.2013 — #i dropped the whole file in my server dir and changed name to gmap3

then these are the two files... I added all the info to both. can you look at them and let me know where I am going wrong

directions.php

<html>

<head>

<link rel="stylesheet" href="styles/layout.css" type="text/css" />

<script type="text/javascript" src="gmap3/jquery/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="gmap3/gmap3.min.js"></script>

<script type="text/javascript" src="gmap3/gmap3.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="scripts/jquery.gmap.js"></script>

<script type="text/javascript">

function initGeolocation()

{

if( navigator.geolocation )

{

// Call getCurrentPosition with success and failure callbacks

navigator.geolocation.getCurrentPosition( success, fail );

}

else

{

alert("Sorry, your browser does not support geolocation services.");

}

}

function success(position)

{

document.getElementById('lat').value = position.coords.latitude

document.getElementById('longitude').value = position.coords.longitude;

}

function fail()

{

// Could not obtain location

}

</script>

</head>

<body onLoad="initialize(); initGeolocation();">

<div class="wrapper col1">

<?php

include("includes/header.php")

?>

<div id="topnav">
   <?php

include("includes/nav.php")

?>

</div>
  <br class="clear" />

</div>

</div>

<div class="wrapper col2">

<div id="breadcrumb">

<center>

<ul>

<form name="directions" method="POST" action="actions/getDirections.php">

 •<tr>

<td valign="top">

<label for="lat">Latitude:</label>

</td>

<td valign="top">

<INPUT TYPE="text" NAME="lat" ID="lat" maxlength="30" size="25" value"">

</td>

</tr>

 •<tr>

<td valign="top">

<label for="longitude">Longitude:</label>

</td>

<td valign="top">

<INPUT TYPE="text" NAME="longitude" ID="longitude" maxlength="30" size="25" value"">

</td>

 •<tr>

<label for="submit">Submit:</label>

<td colspan="2" style=text-align:center, >

<input type="submit" value="Directions">

</center>

</td>

</tr>

</table>

</form></tr>

</div>

</div>

</ul>

</div>

<br class="clear" />

</div>

<div id="mapWrap">

<div id="mapContainer">

<script type="text/javascript">

$("#test").gmap3({

getroute:{

options:{

origin:"<? echo $lat_long; ?>",

destination:"32.794213,-96.618572",

travelMode: google.maps.DirectionsTravelMode.DRIVING

},

callback: function(results){

if (!results) return;

$(this).gmap3({

map:{

options:{

zoom: 10,

}

},

directionsrenderer:{

container: $(document.createElement("div")).addClass("googlemap").insertAfter($("#test")),

options:{

directions:results

}

}

});

}

}});

</script>

<div id="test"></div>

</div>

<br class="clear" />

</div>

<

<div class="wrapper col4">

<?php

include("includes/footer.php")

?>

</div>

</body>

</html>

#######################################################

and this is getDirections.php

<script type="text/javascript" src="gmap3/jquery/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="gmap3/gmap3.min.js"></script>

<script type="text/javascript" src="gmap3/gmap3.js"></script>

<?php

$latitude = $_POST["lat"];

$longitude = $_POST["longitude"];

$lat_long = $latitude.",".$longitude;

?>

<script type="text/javascript">

$("#test").gmap3({

getroute:{

options:{

origin:"<? echo $lat_long; ?>",

destination:"32.794213,-96.618572",

travelMode: google.maps.DirectionsTravelMode.DRIVING

},

callback: function(results){

if (!results) return;

$(this).gmap3({

map:{

options:{

zoom: 10,

}

},

directionsrenderer:{

container: $(document.createElement("div")).addClass("googlemap").insertAfter($("#test")),

options:{

directions:results

}

}

});

}

}});

</script>

<div id="test"></div>

@ajm61894Apr 06.2013 — #After a long two hours of debugging, here is the working codes:

[B]directions.php[/B]:

[code=php]
 <html>
 <head>
 <link rel="stylesheet" href="styles/layout.css" type="text/css" />
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="scripts/jquery.gmap.js"></script>
 <script type="text/javascript">
 function initGeolocation()
 {
 if( navigator.geolocation )
 {
 // Call getCurrentPosition with success and failure callbacks
 navigator.geolocation.getCurrentPosition( success, fail );
 }
 else
 {
 alert("Sorry, your browser does not support geolocation services.");
 }
 }
 
 function success(position)
 {
 
 document.getElementById('lat').value = position.coords.latitude 
 document.getElementById('longitude').value = position.coords.longitude;
 
 }
 function fail()
 {
 // Could not obtain location
 }
 
 </script> 
 
 </head>
 
 <body onLoad="initialize(); initGeolocation();">
 
 <div class="wrapper col1">
 
 <?php 
 include("includes/header.php")
 ?>
 
 
 <div id="topnav">
 <?php 
 include("includes/nav.php")
 ?>
 
 
 </div>
 <br class="clear" />
 </div>
 </div>
 <div class="wrapper col2">
 <div id="breadcrumb">
 <center>
 <ul>
 
 <form name="directions" method="POST" action="actions/getDirections.php">
 &nbsp;&bull;<tr>
 <td valign="top">
 <label for="lat">Latitude:</label>
 </td>
 <td valign="top">
 <INPUT TYPE="text" NAME="lat" ID="lat" maxlength="30" size="25" value"">
 </td>
 </tr>
 &nbsp;&bull;<tr>
 <td valign="top">
 <label for="longitude">Longitude:</label>
 </td>
 <td valign="top">
 <INPUT TYPE="text" NAME="longitude" ID="longitude" maxlength="30" size="25" value"">
 </td>
 &nbsp;&bull;<tr>
 <label for="submit">Submit:</label>
 <td colspan="2" style=text-align:center, >
 <input type="submit" value="Directions"> 
 </center>
 </td>
 </tr>
 </table>
 </form></tr>
 
 
 </div>
 </div>
 </ul> 
 </div>
 <br class="clear" />
 </div>
 
 
 <div id="mapWrap">
 <div id="mapContainer">
 
 </div>
 
 <br class="clear" />
 
 </div>
 
 
 <<!--
 #################################################################################################### ### -->
 
 <div class="wrapper col4">
 <?php 
 include("includes/footer.php")
 ?>
 </div>
 </body>
 </html>
 [/code]

[B]getDirections.php[/B]:

[code=php]
 <head>
 <script type="text/javascript" src="gmap3/jquery/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="gmap3/gmap3.js"></script> 

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
 <?php 
 
 $latitude = $_POST["lat"]; 
 $longitude = $_POST["longitude"]; 
 
 $lat_long = $latitude.",".$longitude; 
 
 ?>
 
 <style type="text/css">
 #map {
 height: 300px;
 width: 400px;
 top: 31;
 margin: 20px auto;
 border: 1px solid black;
 }
 
 #list {
 height: 250px;
 width: 300px;
 }
 </style>
 
 <script type="text/javascript">
 
 $(function(){
 
 $("#map").gmap3({
 getroute:{
 options:{
 origin:"<? echo $lat_long; ?>",
 destination:"32.794213,-96.618572",
 travelMode: google.maps.DirectionsTravelMode.DRIVING
 },
 callback: function(results){
 if (!results) return;
 $(this).gmap3({
 map:{
 options:{
 zoom: 15
 }
 },
 directionsrenderer:{
 container: $(document.getElementById("list")),
 options:{
 directions:results
 }
 }
 });
 }
 }});
 });
 </script>
 </head>
 <body>
 <center>
 <table>
 <tr>
 <td style="width: 325px">
 <div id="list"></div>
 </td>
 <td>
 <div id="map"></div>
 </td>
 </tr>
 </table>
 </center>
 </body>
 [/code]

You can of course re-arrange/re-design the [B]getDirections.php[/B] to work with the rest of your web site. Let me know if you run into any issues. Hope this helps! ?

@Nicholas_DiazauthorApr 06.2013 — #I can not thank you enough for the time you have put in to this... If there is anything I can do for you let me know.

I have it basically working but the map canvas is not appearing. its just showing the box borders and blank space in them.

Also I was thinking couldnt I just add the getDirections.php script in to the map_canvas div on the directions.php page and

change the POST to GET. Then just have a map on the page when you go to it and when you hit submit it generates your directions?

@Nicholas_DiazauthorApr 06.2013 — #<html>

<head>

<link rel="stylesheet" href="styles/layout.css" type="text/css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="/gmap3/gmap3.min.js"></script>

<script type="text/javascript" src="scripts/jquery.gmap.js"></script>

<script type="text/javascript">

function initGeolocation()

{

if( navigator.geolocation )

{

// Call getCurrentPosition with success and failure callbacks

navigator.geolocation.getCurrentPosition( success, fail );

}

else

{

alert("Sorry, your browser does not support geolocation services.");

}

}

function success(position)

{

document.getElementById('lat').value = position.coords.latitude

document.getElementById('longitude').value = position.coords.longitude;

}

function fail()

{

// Could not obtain location

}

</script>

</head>

<body onLoad="initialize(); initGeolocation();">

<div class="wrapper col1">

<?php

include("includes/header.php")

?>

<div id="topnav">

<?php

include("includes/nav.php")

?>

</div>

<br class="clear" />

</div>

</div>

<div class="wrapper col2">

<div id="breadcrumb">

<center>

<ul>

<form name="directions" method="GET" action="directions.php">

 •<tr>

<td valign="top">

<label for="lat">Latitude:</label>

</td>

<td valign="top">

<INPUT TYPE="text" NAME="lat" ID="lat" maxlength="30" size="25" value"">

</td>

</tr>

 •<tr>

<td valign="top">

<label for="longitude">Longitude:</label>

</td>

<td valign="top">

<INPUT TYPE="text" NAME="longitude" ID="longitude" maxlength="30" size="25" value"">

</td>

 •<tr>

<label for="submit">Submit:</label>

<td colspan="2" style=text-align:center, >

<input type="submit" value="Directions">

</center>

</td>

</tr>

</table>

</form></tr>

</div>

</div>

</ul>

</div>

<br class="clear" />

</div>

<div id="mapWrap">

<div id="mapContainer">

<?php

$latitude = $_GET["lat"];

$longitude = $_GET["longitude"];

$lat_long = $latitude.",".$longitude;

?>

<style type="text/css">

#map {

height: 500px;

width: 700px;

top: 31;

margin: 20px auto;

border: 1px solid black;

}

#list {

height: 250px;

width: 300px;

}

</style>

<script type="text/javascript">

$(function(){

$("#map").gmap3({

getroute:{

options:{

origin:"<? echo $lat_long; ?>",

destination:"32.794213,-96.618572",

travelMode: google.maps.DirectionsTravelMode.DRIVING

},

callback: function(results){

if (!results) return;

$(this).gmap3({

map:{

options:{

zoom: 15

}

},

directionsrenderer:{

container: $(document.getElementById("list")),

options:{

directions:results

}

}

});

}

}});

});

</script>

</head>

<body>

<center>

<table>

<tr>

<td style="width: 325px">

<div id="list"></div>

</td>

<td>

<div id="map"></div>

</td>

</tr>

</table>

</center>

</body>

</div>

<br class="clear" />

</div>

<

<div class="wrapper col4">

<?php

include("includes/footer.php")

?>

</div>

</body>

</html>

@ajm61894Apr 06.2013 — #If you wanted everything on a single page, copy and paste this as the [B]directions.php[/B] page:

[code=php]
 <html> 
 <head> 
 <link rel="stylesheet" href="styles/layout.css" type="text/css" /> 
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 <script type="text/javascript" src="/gmap3/gmap3.min.js"></script> 

 <script type="text/javascript" src="scripts/jquery.gmap.js"></script> 
 <script type="text/javascript"> 
 function initGeolocation() 
 { 
 if( navigator.geolocation ) 
 { 
 // Call getCurrentPosition with success and failure callbacks 
 navigator.geolocation.getCurrentPosition( success, fail ); 
 } 
 else 
 { 
 alert("Sorry, your browser does not support geolocation services."); 
 } 
 } 
 
 function success(position) 
 { 
 
 document.getElementById('lat').value = position.coords.latitude 

 document.getElementById('longitude').value = position.coords.longitude; 
 
 } 
 function fail() 
 { 
 // Could not obtain location 
 } 
 
 </script> 
 
 <?php 
 
 if (isset($_POST['submit'])) { 
 $latitude = $_POST["lat"]; 
 $longitude = $_POST["longitude"]; 
 
 $lat_long = $latitude.",".$longitude;
 }
 
 ?>
 
 </head> 
 
 <body onLoad="initialize(); initGeolocation();"> 
 
 <div class="wrapper col1"> 
 
 <div id="header">
 
   <div id="logoffButton">
 <a href="logreg.php"><img src="images/demo/login.png" width="150px;"></a></div>
 <br class="clear" />
 
  <div id="logo">
   <img class="imgl" src="images/demo/imgl.gif" width="150"alt="" /><br>
   <p><bold>&nbsp;&nbsp;&nbsp;Telecommunications</bold></p>
  </div> 
 
 
 <div id="topnav"> 
 <ul>
 <li><a href="index.php">Home</a>
 <li><a href="contact.php">Contact Us</a>
 <li><a href="services.php">Services</a>
 <li><a href="employees.php">Employees</a>
 <li><a href="dashboard.php">Dashboard</a></ul>
 
 
 
 </div> 
 <br class="clear" /> 
 </div> 
 </div> 
 <div class="wrapper col2"> 
 <div id="breadcrumb"> 
 <center> 
 <ul> 
 
 <form name="directions" method="POST" action="directions.php"> 
 &nbsp;&bull;<tr> 
 <td valign="top"> 
 <label for="lat">Latitude:</label> 
 </td> 
 <td valign="top"> 
 <INPUT TYPE="text" NAME="lat" ID="lat" maxlength="30" size="25" value""> 
 </td> 
 </tr> 
 &nbsp;&bull;<tr> 
 <td valign="top"> 
 <label for="longitude">Longitude:</label> 
 </td> 
 <td valign="top"> 
 <INPUT TYPE="text" NAME="longitude" ID="longitude" maxlength="30" size="25" value""> 
 </td> 
 &nbsp;&bull;<tr> 
 <label for="submit">Submit:</label> 
 <td colspan="2" style=text-align:center, > 
 <input type="submit" name="submit" value="Directions"> 

 </center> 
 </td> 
 </tr> 
 </table> 
 </form></tr> 
 
 
 </div> 
 </div> 
 </ul> 

 </div> 
 <br class="clear" /> 
 </div> 
 
 
 <div id="mapWrap"> 
 <div id="mapContainer"> 
 
 
 
 <style type="text/css"> 
 #map { 
 height: 500px; 
 width: 700px; 
 top: 31; 
 margin: 20px auto; 
 border: 1px solid black; 
 } 
 
 #list { 
 height: 250px; 
 width: 300px; 
 } 
 </style> 
 
 <script type="text/javascript"> 
 
 $(function(){ 
 
 $("#map").gmap3({ 
 getroute:{ 
 options:{ 
 origin:"28.551772999999997,-80.7944954", 
 destination:"32.794213,-96.618572", 
 travelMode: google.maps.DirectionsTravelMode.DRIVING 
 }, 
 callback: function(results){ 
 if (!results) return; 
 $(this).gmap3({ 
 map:{ 
 options:{ 
 zoom: 15 
 } 
 }, 
 directionsrenderer:{ 
 container: $(document.getElementById("list")), 
 options:{ 
 directions:results 
 } 
 } 
 }); 
 } 
 }}); 
 }); 
 </script> 
 </head> 
 <body> 
 <center> 
 <table> 
 <tr> 
 <td style="width: 325px"> 
 <div id="list"></div> 
 </td> 
 <td> 
 <div id="map"></div> 
 </td> 
 </tr> 
 </table> 
 </center> 
 </body>
 </div> 
 
 <br class="clear" /> 
 
 </div> 
 
 
 <<!-- 
 #################################################################################################### ### --> 
 
 <div class="wrapper col4"> 
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
 function initialize() {
 var position = new google.maps.LatLng(32.794213,-96.618572);
 var myOptions = {
 zoom: 10,
 center: position,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(
 document.getElementById("map_canvas"),
 myOptions);
 
  var marker = new google.maps.Marker({
   position: position,
   map: map,
   title:"Texcom Construction Office."
  }); 
 
  var contentString = '<p style="color:black;"><strong>Texcom Construction LLC</br>1426 Mariposa Dr.</br>Mesquite, TX 75150<br/><br/><a href="directions.php">Click For Directions</a></strong></p1>';
  var infowindow = new google.maps.InfoWindow({
   content: contentString
  });
 
  google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
  });
 
 }
 </script> 
 <html>
 <body onLoad="initialize()">
 
 <div id="footer">
 <div class="box1">
 <h2><center>About Texcom Construction LLC !</center></h2>
 <img class="imgl" src="images/demo/imgl.gif" alt="" />
 <p>Headquartered in North Texas, Texcom Construction LLC has and continues to provide expertly managed telecommunications technicians to serve the industry's largest wireless carriers. By challenging ourselves to build a positive reputation based on our " Customer First" philosophy and our commitment to exceeding current safety regulations, we have built a strong client base in domestic and international markets. We are ready to put this reputation to work for you. Controlled profitable growth can be achieved by using these core values to make daily decisions while constantly ursuing new oppurtunities. This dedication assures a high rate of return to all of our investors.</p>
 </div>
 <div class="box contactdetails">
 <h2><center>Our Contact Details !</center></h2>
 <ul>
 <li>Texcom Construction LLC</li>
 <li>1426 Mariposa Dr.</li>
 <li>Mesquite, TX</li>
 <li>75150</li>
 <li>Tel: 214-775-0851</li>
 <li>Fax: 888-888-888</li>
 <li>Email: [email protected]</li>
 <li class="last">LinkedIn: <a href="http://www.linkedin.com/pub/jt-cooper/10/873/8a5">JT-Cooper @ Linkedin!</a></li>
 </ul>
 </div>
 <div class="box flickrbox">
 <h2><center> <a href="directions.php">Directions To Our Office</a></center></h2>
 <div class="wrap">
 <div class="fix"></div>
 
 
 <div id="map_canvas" style= "width:270px; height:400px"></div>
 <div class="fix"></div>
 </div>
 </div>
 <br class="clear" />
 </div>
 </div>
 <!-- ####################################################################################################### -->
 <div class="wrapper col5">
 <div id="copyright">
 <p class="center">Copyright &copy; 2009 - All Rights Reserved - WWW.TEXCOMCONSTRUCTION.COM</a></p>
 <br class="clear" />
 </div>
 
 </body>
 </html> 
 </div> 
 </body> 
 </html>
 [/code]

@ajm61894Apr 07.2013 — #Sorry, try this:

[code=php]
 <html> 

 <head> 

 <link rel="stylesheet" href="styles/layout.css" type="text/css" /> 

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

 <script type="text/javascript" src="/gmap3/gmap3.min.js"></script> 

 <script type="text/javascript" src="scripts/jquery.gmap.js"></script> 

 <script type="text/javascript"> 

 function initGeolocation() 

 { 

 if( navigator.geolocation ) 

 { 

 // Call getCurrentPosition with success and failure callbacks 

 navigator.geolocation.getCurrentPosition( success, fail ); 

 } 

 else 

 { 

 alert("Sorry, your browser does not support geolocation services."); 

 } 

 } 
 
 function success(position) 

 { 
 
 document.getElementById('lat').value = position.coords.latitude 

 document.getElementById('longitude').value = position.coords.longitude; 
 
 } 

 function fail() 

 { 

 // Could not obtain location 

 } 
 
 </script> 
 
 <?php 
 
 if (isset($_POST['submit'])) { 

 $latitude = $_POST["lat"]; 

 $longitude = $_POST["longitude"]; 
 
 $lat_long = $latitude.",".$longitude; 
 } 
 
 ?> 
 
 </head> 
 
 <body onLoad="initialize(); initGeolocation();"> 
 
 <div class="wrapper col1"> 
 
 <div id="header"> 
 
   <div id="logoffButton"> 
 <a href="logreg.php"><img src="images/demo/login.png" width="150px;"></a></div> 
 <br class="clear" /> 
 
  <div id="logo"> 
   <img class="imgl" src="images/demo/imgl.gif" width="150"alt="" /><br> 
   <p><bold>&nbsp;&nbsp;&nbsp;Telecommunications</bold></p> 
  </div> 
 
 
 <div id="topnav"> 

 <ul> 
 <li><a href="index.php">Home</a> 
 <li><a href="contact.php">Contact Us</a> 
 <li><a href="services.php">Services</a> 
 <li><a href="employees.php">Employees</a> 
 <li><a href="dashboard.php">Dashboard</a></ul> 
 
 
 
 </div> 

 <br class="clear" /> 

 </div> 

 </div> 

 <div class="wrapper col2"> 

 <div id="breadcrumb"> 

 <center> 

 <ul> 
 
 <form name="directions" method="POST" action="directions.php"> 

 &nbsp;&bull;<tr> 

 <td valign="top"> 

 <label for="lat">Latitude:</label> 

 </td> 

 <td valign="top"> 

 <INPUT TYPE="text" NAME="lat" ID="lat" maxlength="30" size="25" value""> 

 </td> 

 </tr> 

 &nbsp;&bull;<tr> 

 <td valign="top"> 

 <label for="longitude">Longitude:</label> 

 </td> 

 <td valign="top"> 

 <INPUT TYPE="text" NAME="longitude" ID="longitude" maxlength="30" size="25" value""> 
 </td> 

 &nbsp;&bull;<tr> 

 <label for="submit">Submit:</label> 

 <td colspan="2" style=text-align:center, > 

 <input type="submit" name="submit" value="Directions"> 

 </center> 

 </td> 

 </tr> 

 </table> 

 </form></tr> 
 
 
 </div> 

 </div> 

 </ul> 

 </div> 

 <br class="clear" /> 

 </div> 
 
 
 <div id="mapWrap"> 

 <div id="mapContainer"> 
 
 
 
 <style type="text/css"> 

 #map { 

 height: 500px; 

 width: 700px; 

 top: 31; 

 margin: 20px auto; 

 border: 1px solid black; 

 } 
 
 #list { 

 height: 250px; 

 width: 300px; 

 } 

 </style> 
 
 <script type="text/javascript"> 
 
 $(function(){ 
 
 $("#map").gmap3({ 

 getroute:{ 

 options:{ 

 origin:"<? echo $lat_long; ?>", 

 destination:"32.794213,-96.618572", 

 travelMode: google.maps.DirectionsTravelMode.DRIVING 

 }, 

 callback: function(results){ 

 if (!results) return; 

 $(this).gmap3({ 

 map:{ 

 options:{ 

 zoom: 15 

 } 

 }, 

 directionsrenderer:{ 

 container: $(document.getElementById("list")), 

 options:{ 

 directions:results 

 } 

 } 

 }); 

 } 

 }}); 

 }); 

 </script> 

 </head> 

 <body> 

 <center> 

 <table> 

 <tr> 

 <td style="width: 325px"> 

 <div id="list"></div> 

 </td> 

 <td> 

 <div id="map"></div> 

 </td> 

 </tr> 

 </table> 

 </center> 

 </body> 
 </div> 
 
 <br class="clear" /> 
 
 </div> 
 
 
 <<!-- 

 #################################################################################################### ### --> 
 
 <div class="wrapper col4"> 

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 <script type="text/javascript"> 
 function initialize() { 
 var position = new google.maps.LatLng(32.794213,-96.618572); 
 var myOptions = { 
 zoom: 10, 
 center: position, 
 mapTypeId: google.maps.MapTypeId.ROADMAP 
 }; 
 var map = new google.maps.Map( 
 document.getElementById("map_canvas"), 
 myOptions); 
 
  var marker = new google.maps.Marker({ 
   position: position, 
   map: map, 
   title:"Texcom Construction Office." 
  }); 
 
  var contentString = '<p style="color:black;"><strong>Texcom Construction LLC</br>1426 Mariposa Dr.</br>Mesquite, TX 75150<br/><br/><a href="directions.php">Click For Directions</a></strong></p1>'; 
  var infowindow = new google.maps.InfoWindow({ 
   content: contentString 
  }); 
 
  google.maps.event.addListener(marker, 'click', function() { 
   infowindow.open(map,marker); 
  }); 
 
 } 
 </script> 

 <html> 
 <body onLoad="initialize()"> 
 
 <div id="footer"> 
 <div class="box1"> 
 <h2><center>About Texcom Construction LLC !</center></h2> 
 <img class="imgl" src="images/demo/imgl.gif" alt="" /> 
 <p>Headquartered in North Texas, Texcom Construction LLC has and continues to provide expertly managed telecommunications technicians to serve the industry's largest wireless carriers. By challenging ourselves to build a positive reputation based on our " Customer First" philosophy and our commitment to exceeding current safety regulations, we have built a strong client base in domestic and international markets. We are ready to put this reputation to work for you. Controlled profitable growth can be achieved by using these core values to make daily decisions while constantly ursuing new oppurtunities. This dedication assures a high rate of return to all of our investors.</p> 
 </div> 
 <div class="box contactdetails"> 
 <h2><center>Our Contact Details !</center></h2> 
 <ul> 
 <li>Texcom Construction LLC</li> 
 <li>1426 Mariposa Dr.</li> 
 <li>Mesquite, TX</li> 
 <li>75150</li> 
 <li>Tel: 214-775-0851</li> 
 <li>Fax: 888-888-888</li> 
 <li>Email: [email protected]</li> 
 <li class="last">LinkedIn: <a href="http://www.linkedin.com/pub/jt-cooper/10/873/8a5">JT-Cooper @ Linkedin!</a></li> 
 </ul> 
 </div> 
 <div class="box flickrbox"> 
 <h2><center> <a href="directions.php">Directions To Our Office</a></center></h2> 
 <div class="wrap"> 
 <div class="fix"></div> 
 
 
 <div id="map_canvas" style= "width:270px; height:400px"></div> 
 <div class="fix"></div> 
 </div> 
 </div> 
 <br class="clear" /> 
 </div> 
 </div> 
 <!-- ####################################################################################################### --> 
 <div class="wrapper col5"> 
 <div id="copyright"> 
 <p class="center">Copyright &copy; 2009 - All Rights Reserved - WWW.TEXCOMCONSTRUCTION.COM</a></p> 
 <br class="clear" /> 
 </div> 
 
 </body> 
 </html> 

 </div> 

 </body> 

 </html>
 [/code]

@Nicholas_DiazauthorApr 07.2013 — #It still does not show the map canvas... it just shows the border of the divs. And I meant just like adding the coding from getDirections straight in to the page instead of a new page having to load.

I copy and pasted the code from getDirections in to the

<div id="mapWrap">

<div id="mapContainer">

your code from getDirections.php here.

The problem is the map canvas just does not populate at all. I am thinking this could hve something to do with the includes of the .js files? or gmap3 install?

@ajm61894Apr 07.2013 — #Did you try using the stand alone code I just posted. It should do exactly what you're asking. It displays the form and the blank map but when you click the submit button, it reloads the page but populates the map and list with the proper directions.

@Nicholas_DiazauthorApr 07.2013 — #Yes even with the stand alone code you posted it still does not work

@Nicholas_DiazauthorApr 07.2013 — #I dont know what to do at this point.. I have been working on this four days now, and you have invested tons of time in it your self...

I hate to pay someone to fix it for me not because of the money but because I want to learn.

and how do you embed your code in these forum boxes instead of the way I have been copying and pasting them?

Also in #PHP _↴

[RESOLVED] How to do Subject with my words in mail function?All within one page?PHP mail() delivery problems

Success!

Help @Nicholas_Diaz spread the word by sharing this article on Twitter...

Tweet This

sending lat and long to google maps and returning directions on my web page.

14 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

sending lat and long to google maps and returning directions on my web page.

14 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #PHP _↴