overriding big popup on directions Google Maps

Question

I've happily implemented v2 of Google maps to my site without a hitch, I also successfully perform a drive directions using GDirections.load().

What I need to do is stop the popup of the mini map when you select a particular step in the routing directions. So when the user clicks on say "step 3", instead of the default popup showing a mini map, I'd like to add a custom icon to that position.

Hope it makes sense Thanks in advance guys.

Answer 1

You need to add a handler on the GDirections object for the addoverlay event:

GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay);

When your onGDirectionsAddOverlay handler is called you can iterate through the new markers and replace them with copies that open your custom info window:

for (var i = 0; i <= gdir.getNumRoutes(); i++) 
{
    var originalMarker = gdir.getMarker(i);
    latLngs[i] = originalMarker.getLatLng();
    icons[i] = originalMarker.getIcon();
    newMarkers[i] = new GMarker(latLngs[i], { icon: icons[i], draggable: true, title: 'Kan flyttes' });
    map.addOverlay(newMarkers[i]);

    // add stuff to your newMarkers[i] click event...
    // ..

    // Now we can remove the original marker safely
    map.removeOverlay(originalMarker);
}