GoogleMap in modal

[jeromelachaud]

GoogleMap in modal

[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.