How to add multiple maps on same page

[ValtteriL]

How can I add multiple maps on same page? Seems like the package cannot load the second map after the first one has been loaded.

[dburles]

Should be no problem at all, just make sure that you provide each a unique name value

[ValtteriL]

Funnily enough I got the two maps to load, but landed onto another problem. The maps only load after inspector is opened.

I have my map-containers hidden in panels by default and call GoogleMaps.load() when a panel is toggled visible. The first map displays right away when the panel is toggled whereas the second one always stays blank until I open inspector.

What could cause this?
Should the GoogleMaps.load() be called only once?

I use unique names on the maps, as well as unique options.
I am adding circles into the maps with GoogleMaps.ready() in Template.myTemplate.onCreated.

[dburles]

It seems like it might be an issue with how you're hiding/showing the maps. How are you handling that?

[ValtteriL]

I am using basic Bootstrap collapsibles for hiding/showing the maps.
<div class="collapse" id="mapOneCollapsible">
<div class="map-container">
{{> googleMap name="mapOne" options="mapOneOptions"}}
</div></div>

Which are triggered by buttons:
<button data-toggle="collapse" data-target="#mapOneCollapsible">Toggle mapOne</button>

The GoogleMaps.load() is called whenever either of the buttons is clicked

Both maps load correctly if they are both toggled visible when GoogleMaps.load() is called AND neither of the maps have loaded before.

I wonder if the maps can be loaded asynchronously like I have intended.

[dburles]

Your issue is most likely that the map is failing to correctly calculate the height of its container which causes the height to be calculated to 0. I left more detail on how to solve it over here #58

[ValtteriL]

I have explicitly defined the map-container height, and width is auto:
.map-container {
width: auto;
height: 500px;
}

I also tried defining the width explicitly but without luck. :/

[dburles]

Strange, post a simple reproduction app and I'll take a look

[ValtteriL]

Here's reproduction. Please try adding class 'in' in the panels its toggling, it makes them visible by default and makes the maps load correctly.

https://github.com/ValtteriL/googlemap_issue