CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markersmap-directionsgoogle-polyline
roza
roza

Reputation: 585

How to make infinite polyline in google directions and fit draggable markers to the line?

I discovered that is possible to add only eight waypoints in google api directions, you know how to bypass this limitation? I've tried to display direction api, but gave up this idea. Now my solution is based on own polyline, each click adds marker that should stick to that line, next together with it should move as you drag and here occurred is that if there are more than 8 points polyline with markers is no longer compatible. Maybe my approach is completly bad? How to fix this?

Current code: jsfiddle

Markers are not on the polyline:

enter image description here

Upvotes: 2

Views: 1566

Answers (2)

hamczu
hamczu

Reputation: 1774

So, my solution is to create render DirectionRenderner between each important waypoint (with marker?): http://jsfiddle.net/9T7Vg/

  • draggable markers that look exactly like original ones
  • draggable polyline with immediately calculation
  • custom markers with letters (A, B, etc.) - this was difficult
  • route computation in long distance is much faster
  • route can have more than 8 waypoints (you can improve script to automate split the route when user want to place 9th waypoint between markers)

So this solution is in fact better than original in Google Maps, especially with long routes.

Upvotes: 1

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

One way to avoid markers being placed in the middle of the block is to place one at the end of the generated polyline, for example, inside one of your loops, instead of where the click was.

for (k = 0; k < next.length; k++) {
  polyline.getPath().push(next[k]);

  if (z == steps.length-1 && k == next.length-1) {
    var roadMarker = new google.maps.Marker( {
      map: map, 
      position: next[k], 
      icon: "http://labs.google.com/ridefinder/images/mm_20_green.png"
    });   
  }                        
}

You will have to also change the first marker to be placed at the start of the polyline

This applies the code above http://jsfiddle.net/T79as/3/

Upvotes: 2

Related Questions