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?

Does it work if you _only_ put the second map in the view? – t56k Dec 17 '18 at 02:13 — t56k, Dec 17 '18 at 02:13
Not if I use `map2` as the id and name of the div – Leticia Esperon Dec 17 '18 at 02:17 — Leticia Esperon, Dec 17 '18 at 02:17

ErvalhouS · Answer 1 · 2018-12-20T19:17:32.907

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

edited Dec 20 '18 at 19:17

answered Dec 20 '18 at 12:30

ErvalhouS

4,178
1
22
38

Thank you for the answer! What do you mean by `Try moving render '/admin/map_include_scripts' to a common snippet, outside each div map loop`. I moved it to to before the first div, an uncommented the second div, and removed the include from inside the divs. There i'm getting `Uncaught TypeError: Cannot read property 'addMarker' of undefined` from inside a line of the addMarker function (clusterer is undefined). Any ideas? – Leticia Esperon Dec 20 '18 at 15:49
Hmm that's what I did and it didn't work. The error is the one I put above – Leticia Esperon Dec 20 '18 at 19:31
You may be experiencing a JS order issue, or `handler = Gmaps.build('Google');` may not be executed twice. Try changing the order and initializing `handler` on `/admin/map_include_scripts` – ErvalhouS Dec 20 '18 at 20:00
Still doesn't work. observe that just using 1 div, if I chang the div id and the param passed I see no map. So the only id that works is `map`. So weird – Leticia Esperon Dec 21 '18 at 01:44

score 0 · Accepted Answer · answered Dec 22 '18 at 18:54

0

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?

answered Dec 22 '18 at 18:54

sloneorzeszki

1,274
3
12
22

Actually, you were right. The width/height was set to 0. In my scss I had defined that #map would have a certain width/height. But when changing the id of the div, I didn't realize that now this css rule wouldn't be applied and the div was not having any width. I feel stupid. Sorry and thank you! – Leticia Esperon Jan 02 '19 at 17:58
Great to hear that and no problem :) – sloneorzeszki Jan 03 '19 at 07:13

gmaps4rails not rendering in specified div id

2 Answers2