search

allenhwkim / angularjs-google-maps

The Simplest AngularJS Google Maps V3 Directive
http://ngmap.github.io
MIT License
1.52k stars 517 forks source link

Displaying distance between two markers #298

Closed mediavistatest closed 9 years ago

mediavistatest commented 9 years ago

Is there a way to display distance between two markers and/or origin & destination on page (not in panel)?

Fabulous lib. by the way.

allenhwkim commented 9 years ago

Could you explain more about your use case? I am just curious about it.

mediavistatest commented 9 years ago

Let's say I have a predefined path (origin & destination) with POI's and a marker which represents me on that path. I would like to know my distance from various POI's along that path. The path don't have to be predefined basically I just want to know how far is that coffee shop or ATM from me.

allenhwkim commented 9 years ago

You may checkout this, https://developers.google.com/maps/documentation/javascript/distancematrix

DistanceMatrix does not require map nor directive.

Another way to do is to use directions directive. As you see it here, https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/directions2.html, you have access to DirectionsRenderer by using $scope.map.directionsRenderers.myId.

https://developers.google.com/maps/documentation/javascript/reference?hl=en#DirectionsRenderer

You use getDirections() or directions, then calculate the distance from there. e.g.,

  Distance:
  {{map.directionsRenderers[0].directions.routes[0].legs[0].distance}}
mediavistatest commented 9 years ago

Thanks. This helped a lot, I think I can manage now on my own.

nscpro commented 4 years ago

This not working..How can i get Travel time and Distance? To print out other line in php file.

Example:

Travel time: 46 minutes Distance: 68 km

My code:

`<ng-map zoom="17" center="[58.41667, 22.5]" map-type-id="TERRAIN" disable-default-u-i="true" style="width:70%; height:100%; float:left"> <directions draggable="true" travel-mode="DRIVING" origin="current-location" destination="58.14428, 22.24736" suppress-markers="true">

Sinu asukoht 

    <marker 
      id="end"
      position="58.14428, 22.24736"
      icon="https://monitooring.nsc.ee/rescue/112/marker.png">
    </marker>
  </ng-map>`