Search code examples
angularjsgoogle-maps-api-3directionng-map

Display a simple path between two points using ngmap in angularjs


I have followed the Demo and the github documentation of ngmap but still can't load a simple map with two points plotted and connected in it using the "directions" directive. (Weirdly though I can plot simple unconnected points in my map using the "marker" keyword)

I already included an apikey in my index.html file using the following format:

<script src="http://maps.google.com/maps/api/js?key=APIKEY"></script>

and added ngMap as a dependency in my modules.

and tested my codes in plunker

I'm sure I'm just missing out something very obvious in the tutorials. Appreciate all the help and thanks in advance.

EDIT:

template code snippet:

<ng-map zoom-to-include-markers="true" >
         <directions
          draggable="true"
          panel=""
          travel-mode=""
          origin="14.600631955983781,120.99075458943844"
          destination="14.600839603150039,120.98217152059078">
        </directions>
        </ng-map>

Solution

  • Solved by adding a value to the waypoint property of directions.

    <directions
              draggable="true"
              panel=""
              travel-mode=""
              waypoint = /* insert locations here in between origin and destination */
              origin="14.600631955983781,120.99075458943844"
              destination="14.600839603150039,120.98217152059078">
    </directions>
    

    Although I still haven't found a way for this to work in just routing two locations in a map.