Home/ Questions/Q 8236349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T19:06:23+00:00

I use GMAP3 plugin to render driving direction. And would like to add a

  • 0

I use GMAP3 plugin to render driving direction. And would like to add a clear button so it can be clear but I haven’t been able to find the right syntax in GMAP3. Here is the my js code, modified from the sample in gmap3.net. I have markers plotted already and latlng are retreived from plotted markers instead of from clicks position on the map.

function removePath() {
    $(mapID).gmap3({
        action: 'clear',
        name: 'directionRenderer'
        // tag: 'path'  // works too with tag instead of name
});

function updatePath() {
$(mapID).gmap3({
    action: 'getRoute',
    options: {
            origin: m1.getPosition(),
            destination: m2.getPosition(),
            travelMode: google.maps.DirectionsTravelMode.DRIVING
    },
    callback: function (results) {
            if (!results) return;
            $(mapID).gmap3({ 
                action: 'setDirections', 
                directions:results,

            });
    }
});
};

function updateDirection(mm) { // Directions between m1 and m2
var mmID = $(mm).prop('id');
...
if (mmID == 'clearDirection') {
...
    removePath();
    return;
};
...
if (m1 && m2) { updatePath(); };    
};

function initmap() {
    $(mapID).gmap3(
        {
        action: 'init',
        options: defaultMapOptions
        },
    // add direction renderer to configure options (else, automatically created with default options)
        {   action: 'addDirectionsRenderer',
        preserveViewport: true,
        markerOptions: { visible: false },
        options: {draggable:true},
        tag: 'path'
        },
    // add a direction panel
        {   action: 'setDirectionsPanel',
        id: 'directions'
        }
    );

};

A is in place in HTML documents as directions panel. It has a a wrapper which is hidden when the route is cleared by using jquery css property change. The wrapper div’s display property is changed back to ‘block’ whenever value is assigned to either m1 or m2.

<body> 
...
<div id="direction_container" class="shadowSE">
    ....
    <div id="directions"></div>
    ....
</div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Its absolutely working fine.

    $map.gmap3({ action: 'clear', name: 'directionRenderer' });

    *Instructions-
    If you later draw the route then you must write below code otherwise directions not display.

    $map.gmap3({ action: 'addDirectionsRenderer', preserveViewport: true, 
markerOptions: { visible: false} }, 
{ action: 'setDirectionsPanel', id: 'directions' });

    Thanks…

    • 0