gmaps4rails not rendering in specified div id

Question

I am using Gmaps4Rails (Google Maps for Rails) in Active Admin. Everything well so far except for when I had to add multiple maps on the same show page.

gem 'gmaps4rails', '~> 2.1', '>= 2.1.2'

I extracted the importing of scripts to an html that I call only one time in the show view so I don't get an error:

/views/admin/_map_include_scripts.html.erb

<script src="//maps.google.com/maps/api/js?key=<%= ENV['GOOGLE_KEY'] %>"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>

Then in the show I do:

div id: 'map' do
  render '/admin/map_include_scripts'
  markers = DeliveryMarkersService.new(delivery).orders_markers
  render '/admin/map_scripts', markers: markers, map_div_id: 'map'
end

And in views/admin/_map_scripts.html.erb I have:

<script>
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: { id: '<%= map_div_id %>' }}, function(){
    markers = handler.addMarkers(<%=raw markers.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(15);
  });
</script>

So far it works GREAT! I see the maps, the markers, everything.

Now I want to add a second div with a second map so first I tried changing the first div to the following to verify that I could tell Gmaps in what div to display it:

div id: 'map2' do
  render '/admin/map_include_scripts'
  markers = DeliveryMarkersService.new(delivery).orders_markers
  render '/admin/map_scripts', markers: markers, map_div_id: 'map2'
end

But then the map does not render! No errors on console. If I do send an invalid id (div id that does not exist) I do get an error.

Does anyone know what's happening?

Answer 1

Could you specify what do you mean by 'the map does not render'? It's not visible on the page or the DOM? Have you checked the source code/DOM in developer tools? If you don't get the error maybe it renders but just isn't displayed correctly, e.g. it has width/height set to 0?

Answer 2

Your problem may be related to doing render '/admin/map_include_scripts' twice in the same page, which triggers another load of the maps and overlay APIs. When you do that after the first one has loaded your render '/admin/map_scripts', markers: markers, map_div_id: 'map2' may be executing the map rendering JS before the libs are completely loaded. Try moving render '/admin/map_include_scripts' to a common snippet, outside each div map loop. This way the libs are loaded only once you don't need to wait a second load of the API.

render '/admin/map_include_scripts'
div id: 'map' do
  markers1 = DeliveryMarkersService.new(delivery1).orders_markers
  render '/admin/map_scripts', markers: markers1, map_div_id: 'map'
end

div id: 'map2' do
  markers2 = DeliveryMarkersService.new(delivery2).orders_markers
  render '/admin/map_scripts', markers: markers2, map_div_id: 'map2'
end