ngmap Directions adding and Removing Points

[Matthewloughton]

Hi Allen, I really hope you can help me.

I am using the ngmap along with directions directive and have a form which builds up a route as the user requires. It builds the route on a scope object called routeDetails. This object has origin, destination and a Waypoints array. This is what it looks like with use of the directive:

Say I have the following 4 locations and a route following the sequencing:

Location 1: -34.06209,18.84127000000001 Location 2: -33.924920712322596,18.420016780395486 Location 3: -34.082619, 18.823421000000053 Location 4: -33.9600453,18.7023790000001

My object comes out like this (which is correct and the route is displayed correctly):

{ "Waypoints": [ { "location": { "lat": -33.924920712322596, "lng": 18.420016780395486 }, "stopover": true }, { "location": { "lat": -34.082619, "lng": 18.823421000000053 }, "stopover": true } ], "origin": "-34.06209,18.84127000000001", "destination": "-33.9600453,18.7023790000001" }

Now, say the user decides to discard location 4 on the route. I need to ‘pop’ the last location from the route. My logic says I replace the destination object with the last object in the Waypoints array and then remove that object from the Waypoints array.

The object comes out like this (which looks correct to me):

{ "destination": "-34.082619,18.823421000000053", "Waypoints": [ { "location": { "lat": -33.924920712322596, "lng": 18.420016780395486 }, "stopover": true } ], "origin": "-34.06209,18.84127000000001" }

What happens on the map is completely erratic though. It shows the correct route probably 20% of the time. Sometimes it’ll “get confused” and give me a route like Location 1 -> Location 2 -> Location 4. Instead of 1, 2, 3. I have looked at my object numerous times to make sure it’s not the object that its wrong but I can’t see anything wrong with it.

Another thing I noticed is when the last ‘leg’ is removed (routeDetails is empty) the last origin and destination still shows on the map. Eg: User removed Location 4, 3, 2, and 1. It still shows a route from Location 1 -> Location 2 on the map.

Can you think of anything that would cause this?

Ps. This was super complicated to type out and I wouldn’t be surprised if I am unable to explain the problem correctly. I am completely willing to have a Skype call with you so I can show you the problem first hand.

[allenhwkim]

Let's make it simple. Please create your example in plunker, then point me what's not working. I am not very good at helping others without a solid example

[Matthewloughton]

Hi Allen,

I started developing an example for you but it would just simply take too much time to develop and Murphy's law would have it, the example will work for you and you'll think I'm lying. (its an erratic problem, you have to sit and do it over and over sometimes)

I have however screen recorded a time when it's worked perfectly and a time when the bug I described crept in.

Here are the videos (you might need to download the videos and play them in windows media player):

https://www.dropbox.com/s/1wpw1tks6175f7e/WORKING_EXAMPLE.mp4?dl=0

https://www.dropbox.com/s/cbvop0nk1k8kzpy/BROKEN_EXAMPLE.mp4?dl=0

The video entitled 'Working_Example' is evidence that it does work sometimes...

The Video entitled 'Broken example' - I'll try explain what happens because its difficult to see without explanation. At 0:24 in the video, when I remove the Location C -> Location D leg. The map shows that I have removed Location C and then marks Location D as Location C (you might need to rewind a couple of times to see what I mean). You will see the object at the bottom of the screen. The original Location D (the one that was SUPPOSED to be removed on the map, is coords -33,926646109621764, 18,867790000000014) and it's not in the object, so I don't understand why its displaying it on the map.

I really do think the only way is to have a Skype call or teamviewer or some sort of remote desktop session so I can show you first hand whats happening and explain the code.

[Matthewloughton]

Hi Allen,

Did this help at all?

[allenhwkim]

Closing this. Please create another plunker with simple example

[bharney]

@Matthewloughton I know I'm late to the party, but hopefully this will help anyone else who runs into this issue. Essentially my problem had been that I was trying to clear all of the markers on my map after getting directions. And even though my markers were removed. The directions persisted. I was able to set the origin and destination to '' and hide the direction panel. But the actual A and B markers with directions could still be seen on the map. To remove directions from the map itself, you have to actually call the #id on the directive, and setMap(null). ctrl.map.directionsRenderers.dir.setMap(null); Even though you are not able to see this property setMap() within debugger/console. You can to set that to null in order to remove the directions.

<ng-map center="{{ctrl.addr}}"
                zoom="4"
                scroll="true"
                zoom-to-include-markers="auto"
                on-rightclick="ctrl.addMarker()">
                    <directions id="dir"
                                       panel="directions"
                                       suppress-markers="{{ctrl.directions}}"
                                       travel-mode="DRIVING"
                                       origin="{{ctrl.origin}}"
                                       destination="{{ctrl.destination}}">
                     </directions>
                    <marker ng-repeat="item in ctrl.markers track by $index" 
                                  on-rightclick="ctrl.removeMarker($index)" 
                                 position="{{item.lat}}, {{item.lng}}">
                   </marker>
</ng-map>

ctrl.resetMap = function () {
                ctrl.markers = [];
                ctrl.origin = '';
                ctrl.destination = '';
               ctrl.map.directionsRenderers.dir.setMap(null);
}

[martinmakesitwork]

Hi, this is the plunk which shows the problem.

http://plnkr.co/edit/oHtF6sTY5KOujWM8Vj3G?p=preview