Using with UJS

In standard configuration gem renders all map's JS code only when needed, and on the bottom of html page, so it's unusable in :format=>:js views.. So here's little howto for using it with UJS requests..

Let's say we have a div#content in the layout to show UJS parts in and a @json with our data.. To use gmaps4rails in such scenario, you must:

• put maps JS files inclusion tags in your layout file (standard application.html.erb):

<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>

• in the .js.erb file with our remote map put this:

$('#content').html('<%= escape_javascript( gmaps({:last_map => false}) ) %>');

Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
    Gmaps.map.map_options.maxZoom = 15;
    Gmaps.map.initialize();
    Gmaps.map.markers = <%=raw @json.to_gmaps4rails %>;
    Gmaps.map.create_markers();
    Gmaps.map.adjustMapToBounds();
    Gmaps.map.callback();
};
Gmaps.loadMaps();