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.
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.
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
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With