GoogleMap in modal

[vitovalov]

Hi,
Thanks for your great work. I've chosen it since it matches my requirements nearly 100%.

However, I'm not able to add a Google Map div into the modal posts so that when you open each post, it shows a Google Map of specific location.

I've added two more attributes to post: post.latand post.lng. And the problem is with the moment of render the map. It appears that once you load the whole page, it tries to load the map but since the modal is not opened, it is created with bad height&width. And once you open the modal, the map is rendered in grey box so the map itself is not displayed.

Could you please add this feature support? How could I achieve it?

Thanks!

[jeromelachaud]

Hi, could you share your project source code?

[vitovalov]

yes sure!
You can see it here
The exact commit
I have very little experience with web development and as you will see I inserted the map div with absolute height and managed to have it on the right of the post's image.
In order to handle the modal opened event, I'm using boostrap's show combined with a 500ms timeout.
Things aren't smooth when a modal is opened and scrolled, but it works fine with first post.

However, if you see the second post, the streetview div is not loaded. I cannot see the reason for that.

It would be perfect if you could also help me with google map divs positioning. I want them on the right of the post image with correct height.

Thanks!

[jeromelachaud]

what is the div id="pano" for?

[vitovalov]

It's for streetview I guess. I've used official google sample

[MrCsabaToth]

I've displayed Google Charts and other contents like what you have which require the div sized properly when it is measured. The solution to your problem is probably to defer the Google Maps code until the modal dialog is shown. Fortunately Bootstrap has built-in event for that: https://getbootstrap.com/javascript/#js-events

$('#myModal').on('shown.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Same goes for Boostrap popover, it has a shown event.

[MrCsabaToth]

I'm not familiar with RoR or Jekyll, so I cannot tell you right away where/how to incorporate this handler.