CODEWITHSUNDEEP
javascriptphpgoogle-mapsgeocoding
user2704687
user2704687

Reputation: 185

Combining geocoding and Google directions

I am a PHP developer with little to no knowlegde of javascript, but I'm trying to combine geocoding and the google directions javascript code. Geocoding with PHP isn't an option because of the server side limit. This is what I have so far:

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

<script type="text/javascript">


$(document).ready(function(){
  initialize(); 
});


var geocoder = new google.maps.Geocoder();
var address = "hoefslag 41, 's gravenmoer";

geocoder.geocode( { 'address': address}, function(results, status) {

  if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();

            } 

    }); 




  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  function initialize() {
    var latlng = new google.maps.LatLng(51.764696,5.526042);
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"My location"
    }); 
  }





  function calcRoute() {
    var start = document.getElementById("routeStart").value;
    var end = "51.764696,5.526042";
    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);
      }
    });
  }




</script>


----- HTML for the map:

<div id="map_canvas" style="width:710px; height:300px"></div>   
    <form action="" onsubmit="calcRoute();return false;" id="routeForm">
        <input type="text" id="routeStart" value="">
        <input type="submit" value="Route plannen">
    </form>
<div id="directionsPanel"></div>

The latitude and longitude are calculated correctly from the address I've entered (checked by displaying the two variables. However, no matter what I try, I cannot seem to incorporate these two variables inside the two functions beneath the geocoding code, without breaking down the 'calculate route' functionality. Any ideas?

Upvotes: 0

Views: 1215

Answers (1)

Jenson M John
Jenson M John

Reputation: 5689

Just Try with this.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Google Map Address</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">


    $(document).ready(function(){
     // initialize(); 
    });


    var geocoder = new google.maps.Geocoder();
    var address = "hoefslag 41, 's gravenmoer";

    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();

        alert("lat.."+latitude+"..&.."+longitude);
        initialize(latitude,longitude);
        $("#latlong").val(latitude+","+longitude);
                } 

        }); 




      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      function initialize(latitude,longitude) {
        var latlng = new google.maps.LatLng(latitude,longitude);
        directionsDisplay = new google.maps.DirectionsRenderer();
        var myOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));
        var marker = new google.maps.Marker({
          position: latlng, 
          map: map, 
          title:"My location"
        }); 
      }





      function calcRoute() {

        var start = document.getElementById("routeStart").value;
        var end = $("#latlong").val();

        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);
          }
        });
        alert("Start.."+start+"..End.."+end);
      }




</script>

    </head>
    <body>

    <h2>Google Map Address</h2>

    <div id="map_canvas" style="width:710px; height:300px"></div>   
    <!--<form action="" onsubmit="calcRoute();return false;" id="routeForm">-->
    <form action="" id="routeForm">
        <input type="text" id="routeStart" value="">
        <input type="button" value="Route plannen" onClick="calcRoute();">
        <input type="hidden" name="latlong" id="latlong"/>
    </form>
   <div id="directionsPanel"></div>

    </body>
    </html>

Upvotes: 1

Related Questions