How do I add Polylines in gmaps4rails v2

Question

I upgraded to the latest version of gmaps4rails (v2) and am having some issues getting polylines drawing.

I can get markers working with the sample code on the wiki, but if I change the addMarkers to addPolylines, nothing renders in the map. Here's the handler code:

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
polylines = handler.addPolylines([{"lat":45.678295,"lng":-121.603813,"ele":438.626221,"time":1381851321},{"lat":45.678196,"lng":-121.603607,"ele":423.202148,"time":1381851363},{"lat":45.678181,"lng":-121.603607,"ele":421.108398,"time":1381851373},{"lat":45.678162,"lng":-121.603584,"ele":420.153442,"time":1381851383},{"lat":45.678123,"lng":-121.603569,"ele":422.561096,"time":1381851393},{"lat":45.678165,"lng":-121.6036,"ele":425.191284,"time":1381851403},{"lat":45.678169,"lng":-121.603607,"ele":425.262329,"time":1381851413}]);
handler.bounds.extendWith(polylines);
handler.fitMapToBounds();
});

No errors in the javascript console, just no map rendering. Any thoughts?

Answer 1

There are few things:

• first a bug in my 2.0.0, I've upgraded 2.0.3

• then an issue in your interpretation: a polyline is an array of lat/lng so your code cant work.

• google doesnt provide any way to get the bounds of a polyline, so its difficult to adjust the map to it automatically.

That said, you can do:

polyline = [{"lat":45.678295,"lng":-121.603813,"ele":438.626221,"time":1381851321},{"lat":45.678196,"lng":-121.603607,"ele":423.202148,"time":1381851363},{"lat":45.678181,"lng":-121.603607,"ele":421.108398,"time":1381851373},{"lat":45.678162,"lng":-121.603584,"ele":420.153442,"time":1381851383},{"lat":45.678123,"lng":-121.603569,"ele":422.561096,"time":1381851393},{"lat":45.678165,"lng":-121.6036,"ele":425.191284,"time":1381851403},{"lat":45.678169,"lng":-121.603607,"ele":425.262329,"time":1381851413}]

handler.addPolyline(polyline); // and not addPolylines
handler.bounds.extend(polyline[0]);
handler.bounds.extend(polyline[ polyline.length - 1]);
handler.fitMapToBounds();

You'll end up with: