Enable bus badges available on Google Maps

Question

Using the Google Maps API, how can I customize the bus stop icons that can be clicked and show the bus number services in the infowindow window? I can see on the Google Map website it is on. But when I create my own code using the map API, does it seem to be disabled by default?

If I do not clarify, see the link to the image.

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

On the left is the map of maps.google.com, and on the right is my implementation of Google Maps. As you can see, I cannot click on the bus station of my implementation, unlike another screen shot.

Any help would be greatly appreciated.

Answer 1

Until you can make it work. This is a "recognized" error in the gmap api: https://code.google.com/p/gmaps-api-issues/issues/detail?id=145

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

Answer 2

You can get the name, ID and coordinates of the bus station, and then get information about the bus stop with any other API. Here is the 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 } }); });