Angular ngMap Google Directions waypoint doesn't recognize array

Question

I am trying to use waypoints in array:

var way = [{ location: { lat: 51.546550, lng: 0.026345 }, stopover: true }, { location: { lat: 51.5493953, lng: 0.0412878 }, stopover: true }];

And load on map like this:

        <ng-map center="51.546550, 0.026345" zoom="13">
            <directions draggable="true"
                        panel="directions-panel"
                        waypoints="way"
                        origin="51.546550, 0.026345"
                        destination="51.5493953, 0.0412878">
            </directions>               
        </ng-map>

For some reason the error I am getting is:

InvalidValueError: in property waypoints: not an Array

If I use array directly it works:

<ng-map center="51.546550, 0.026345" zoom="13">
            <directions draggable="true"
                        panel="directions-panel"
                        waypoints="[{ location: { lat: 51.546550, lng: 0.026345 }, stopover: true }, { location: { lat: 51.5493953, lng: 0.0412878 }, stopover: true }]"
                        origin="51.546550, 0.026345"
                        destination="51.5493953, 0.0412878">
            </directions>               
        </ng-map>

What am I missing?

you do have a controller right for the view?? mind to share it? cause i think that your var way in not being binded to the waypoints and its taking it as a string and not the json object you have defined. — Sunil Lama, Mar 03 '16 at 16:42

Naga Sandeep · Accepted Answer · 2016-03-03T19:20:53.677

2

Update

You can use either waypoints="{{ways}}" or ng-waypoints = "ways". In the below markup I used ng-waypoints. Example here

<ng-map zoom="13" center="51.546550, 0.026345" >
   <directions draggable="true"
                    panel="directions-panel"
                    ng-waypoints='ways'
                    origin="51.546550, 0.026345"
                    destination="51.5493953, 0.0412878">
        </directions>               
  </ng-map>

The js files I used are

<script src="ng-map.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>

Below doesnt work

Can you try $scope.way instead of var way

edited Mar 03 '16 at 19:20

answered Mar 03 '16 at 16:14

Naga Sandeep

1,421
2
13
26

actually at the moment i just created array in html directly with JS, but i have one in angularJs controller scope and it's the same thing. for some reason waypoints doesn't work with objected array. – sensei Mar 03 '16 at 16:21
@NagaSandeep, By Default google allowed 23 waypoints, How to polt more than 23 waypoints? – er.irfankhan11 Dec 28 '16 at 07:22
@Irfan, a simple google search redirected me to this stackoverflow question http://stackoverflow.com/questions/8779886/exceed-23-waypoint-per-request-limit-on-google-directions-api-business-work-lev – Naga Sandeep Dec 28 '16 at 10:57
@NagaSandeep, I did it in Js, but make problem in angularjs – er.irfankhan11 Dec 28 '16 at 11:34

Angular ngMap Google Directions waypoint doesn't recognize array

1 Answers1