Enable bus stop icons clickable in Google Maps

Question

Using the Google Map API, how can I set the bus stop icons to be clickable and show the bus number services in an infowindow? I can see in Google Map site, it is enabled. But when I create my own code using the Map API, it seems that this is disabled by default?

If I'm not making myself clear, please see image link.

https://dl.dropbox.com/u/46360728/diff.maps.png

On the left is the map in maps.google.com site while on the right is my implementation of Google Maps. As you can see, I can't click the bus station of my implementation unlike with the other screenshot.

Any help would be much appreciated.

Answer 1

For now you can't get it to work. It's an 'acknowledged' bug in gmap's api: https://code.google.com/p/gmaps-api-issues/issues/detail?id=145

You'll notice that in their official transit-layer code demo on the api site, there is also no interactivity: https://developers.google.com/maps/documentation/javascript/examples/layer-transit.

Answer 2

You can get bus station name, ID and coordinates, and then get information about bus stop with any other API. Here is code:

var overlay;
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

$('#map-canvas').click(function(event){
    var point = new google.maps.Point(event.pageX,event.pageY);
    var location = overlay.getProjection().fromContainerPixelToLatLng(point); //get map coordinates by click

    var request = {
      location: location,
      types: ['bus_station','subway_station'], //get bus stops and metro stations
      radius: 10,
    };
    placesService = new google.maps.places.PlacesService(map);
    placesService.search(request, function(result, status, pagination){
      station = result[0];
      if(typeof station != 'undefined'){
        pos = station.geometry['location']; //position
        bus_no = station.name.match(/\[([0-9]+)\]/i)[1]; //get ID by name
        alert(bus_no); // ID
      }
    });
  });