Mid-points does't make mark up on map?

Question

I want to display multiple mid-points on geocode map but is does't work for me.below is the mid-point that I targeted to display on map.

Source Code :

 function initialize(){var a,b,c={zoom:14,center:new google.maps.LatLng(mapLatStart,mapLngStart)},d=new google.maps.Map(document.getElementById("map"),c),e=new google.maps.LatLngBounds,f=new google.maps.InfoWindow;for(b=0;b<markers.length;b++){var g=new google.maps.LatLng(parseFloat(markers[b][1]),parseFloat(markers[b][2]));e.extend(g),a=new google.maps.Marker({position:new google.maps.LatLng(parseFloat(markers[b][1]),parseFloat(markers[b][2])),map:d,icon:markers[b][3]}),d.fitBounds(e),d.panToBounds(e),google.maps.event.addListener(a,"click",function(a,b){return function(){f.setContent(markers[b][0]),f.open(d,a)}}(a,b))}google.maps.event.trigger(d,"resize")}

Here is is the map view under map-tap in content area: Map link by simply include in the page.

After debug code I found map is worked with a js map run file

<div id="map" class="content active" data-gmap="{"start": {"lat": "25.687158", "lng":"32.639656"},"midpoints" : {"lat": "25.300000","lng":"32.550000"}, "end": {"lat": "24.088931", "lng":"32.899795"} }" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

Below is code auto generated by js

<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur"), default;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 242px 133px 0px;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;" aria-hidden="true">
<div style="width: 256px; height: 256px; position: absolute; left: 69px; top: 65px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 325px; top: 65px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 69px; top: -191px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 69px; top: 321px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 325px; top: -191px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 325px; top: 321px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: -187px; top: 65px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 581px; top: 65px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: -187px; top: -191px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: -187px; top: 321px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 581px; top: -191px;"></div>
<div style="width: 256px; height: 256px; position: absolute; left: 581px; top: 321px;"></div>
</div>
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: -1;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;" aria-hidden="true">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 69px; top: 65px;">
<canvas draggable="false" style="-moz-user-select: none; position: absolute; left: 0px; top: 0px; height: 256px; width: 256px;" height="256" width="256"></canvas>
</div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 325px; top: 65px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 69px; top: -191px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 69px; top: 321px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 325px; top: -191px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 325px; top: 321px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -187px; top: 65px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 581px; top: 65px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -187px; top: -191px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -187px; top: 321px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 581px; top: -191px;"></div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 581px; top: 321px;"></div>
</div>
</div>
</div>
<div style="position: absolute; z-index: 0; left: 0px; top: 0px;">
<div style="overflow: hidden; width: 637px; height: 400px;">
<img style="width: 637px; height: 400px;" src="https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i9403&2i6847&2e1&3u6&4m2&1u637&2u400&5m5&1e0&5sen-US&6sus&10b1&12b1&token=43557">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;" aria-hidden="true">

Answer 1

Instead of setting the data-gmap properly directly, you should use the Waypoints in Routes described in the documentation.

You should pass a request which looks like:

var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };

to directionsService.route to get your result.

I created a jsfiddle which do just that, hope it helps. http://jsfiddle.net/7d68qfth/