www.webdeveloper.com
Results 1 to 15 of 15

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

  1. #1
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293

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

    if you look at this page here...

    http://www.ogsolutions.us/aziz/directions.php

    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.

  2. #2
    Join Date
    Jul 2010
    Posts
    11

    Possibly combine PHP and jQuery

    On the directions.php page, the form that auto populates with the user's latitude and longitude uses the action page getDirections.php 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 directions.php page, leaving just the latitude/longitude form.

    Then, on the getDirections.php page, I would add the following to take the latitude and longitude from the form:
    PHP Code:
    <?

    $latitude 
    $_POST["lat"];
    $longitude $_POST["longitude"];

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

    ?>
    And I would then use jQuery to create the directions map and list using the new lat/long data. This should be sufficient:
    HTML Code:
    <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>
    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:
    • 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).
    Let me know if this works or if you have any questions/concerns. Hope this helps!

  3. #3
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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?

  4. #4
    Join Date
    Jul 2010
    Posts
    11
    Did you download Gmap3 to your web server? The jQuery library must be added to your web server and then referenced on the getDirections.php page.

  5. #5
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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?

  6. #6
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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">
    &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">
    <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>

  7. #7
    Join Date
    Jul 2010
    Posts
    11
    After a long two hours of debugging, here is the working codes:

    directions.php:
    PHP Code:
    <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>
    getDirections.php:
    PHP Code:
    <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>
    You can of course re-arrange/re-design the getDirections.php to work with the rest of your web site. Let me know if you run into any issues. Hope this helps!

  8. #8
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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?

  9. #9
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    <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">
    &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">

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

  10. #10
    Join Date
    Jul 2010
    Posts
    11
    If you wanted everything on a single page, copy and paste this as the directions.php page:

    PHP Code:
    <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: jtcooper@texcomconstruction.com</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>

  11. #11
    Join Date
    Jul 2010
    Posts
    11
    Sorry, try this:

    PHP Code:
    <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: jtcooper@texcomconstruction.com</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>

  12. #12
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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?

  13. #13
    Join Date
    Jul 2010
    Posts
    11
    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.

  14. #14
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    Yes even with the stand alone code you posted it still does not work

  15. #15
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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?
    Last edited by Nicholas Diaz; 04-06-2013 at 11:47 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles