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?
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?