I'm trying to achieve something like the following in the image

but Actually I don't have any Idea if it's possible or how and where to start. so if you can please lead me if it's possible or not, and how to achieve it or where to start or if anyone knows a similar online working example it would be great thanks in advance

I'm trying to achieve something like the following in the image

but Actually I don't have any Idea if it's possible or how and where to start. so if you can please lead me if it's possible or not, and how to achieve it or where to start or if anyone knows a similar online working example it would be great thanks in advance

• javascript
• ajax
• google-maps
• google-maps-api-3

• 1 I think you will need to use developers.google./maps/documentation/directions – jfvanderwalt Commented May 27, 2013 at 12:59
• yes I've passed on that, but the thing is for example, when my user clicks on the Embedded Google map to calculate the distance between the 2 points I need to get them as locations to send them with the request , I'm stuck in here – ImadBakir Commented May 27, 2013 at 13:08
• what do you mean "embedded map"? – Alkis Kalogeris Commented May 27, 2013 at 16:34
• I mean embedded map?.. like the following, Google Map into an IFrame. – ImadBakir Commented May 27, 2013 at 17:48

1 Answer 1

I found the answer myself, yes it's possible thanks to jfvanderwalt for the useful link of google Docs for Direction API which led me to the working example of what I need and how to do it , here is my working demo example Javascript :

    <script>

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var australia = new google.maps.LatLng(41.171418,28.311553);

function initialize() {

  var mapOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: australia
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    puteTotalDistance(directionsDisplay.directions);
  });

  calcRoute();
}

function calcRoute() {

  var request = {
    origin: 'Istanbul, Turkey',
    destination: 'Ankara, Turkey',
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function puteTotalDistance(result) {
  var total = 0;
  var time= 0;
  var from=0;
  var to=0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
    time +=myroute.legs[i].duration.text;
    from =myroute.legs[i].start_address;
    to =myroute.legs[i].end_address;


  }
  time = time.replace('hours','H');
  time = time.replace('mins','M');
  total = total / 1000.
  document.getElementById('from').innerHTML = from + '-'+to;
  document.getElementById('duration').innerHTML = time ;
  document.getElementById('total').innerHTML =Math.round( total)+"KM" ;
}

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

    </script>

HTML:

<div id="map-canvas" style="margin-left:15px;float:left;width:930px; height:280px"></div>
<div style="float:left;padding-left:20px; padding-top:15px; width:100%; height: 80px;">
<div style="float:left;width: 50%;"><h3 id="from"></h3></div>
<div style="float:right;margin-right: 20px;width: 158px;text-align: right;">
<h3 id="duration"></h3>
</div>
<div style="float:right;width: 158px;text-align: right;">