Google Transit API bus stops in route invisible and on the map disabled

Question

I can't get information from clicking the bus stops although the city has them when I enter in Google Maps, but implementing it myself doesn't work. They are disabled. I'm having a similar problem to another post: Enable bus stop icons clickable in Google Maps

Also when I create a route my stops between the origin and destination don't appear, these white dots are invisible, but if I click in the instructions in the panel this window opens with the information needed.

I've tried out putting transit layer and nothing appears in my jQuery Mobile app.

Any ideas to get this work?

Answer 1

I've found part of the solution. I couldn't see the white dots in the route because when I was creating the direction display I was suppressing markers to get my custom markers instead of the usual Google Map ones. But also I was suppressing the middle points that I needed!

Instead of this:

    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

I've changed it for this:

    directionsDisplay = new google.maps.DirectionsRenderer();

So now I can see the dots:

I still can't get the bus stops information when clicking an icon

Answer 2

You can't get the interactive functionality out of the API that the normal map.google.com has. Using the transit layer gives you a visual display of the transit system, but there's an open bug ticket on this issue: https://code.google.com/p/gmaps-api-issues/issues/detail?id=145.

Even in the official Maps api code demo of a transit layer for London, the transit icons are non-interactive, while on map.google.com they are clickable: https://developers.google.com/maps/documentation/javascript/examples/layer-transit.