Support

Account

Home Forums Front-end Issues Multiple Google Maps on one page

Solving

Multiple Google Maps on one page

  • Hey, I’m having an issue displaying two google maps on the same page. The first map shows up perfectly, but the second map doesn’t fully show up. I’m using all the code snippets found on this site to initialize google maps. I’m attaching two screenshots to help illustrate my problem. Thanks for any help.

    The first map working: https://www.dropbox.com/s/vf37fgrrj2k5a7f/Screenshot%202014-06-19%2008.22.18.png

    The second map not fully rendering: https://www.dropbox.com/s/5tzc3d9lruja5ar/Screenshot%202014-06-19%2008.22.24.png

  • Having the same issue. Was a solution found?

  • Yeah, I was able to fix it. I had to tinker with the js supplied by ACF. Are you loading maps in hidden areas that are using Bootstrap collaspe.js?

  • Hi,

    The maps which aren’t working are being hidden in an accordion. The default (open) state map does work.

  • Here is a link to the code I’m using for multiple maps: https://gist.github.com/phoenixMag00/ea4907403ae3913f5881

    You are going to need to mod lines 158 to 172.

    It reloads and recenters maps when certain Bootstrap events are fired. Basically anytime a panel is revealed or the window resizes the maps refire.

  • Hey I am using bootstrap 3 collapse, I still have the problem, the first map loads but other maps are not loading properly. Can you please help me out where I am wrong ?

  • Hey guys! I’m using Bootstrap 4 and created a structure of 3 tabs.
    I’m using @mrbutlertron code, but only first and last tabs maps are displayed.

    No idea on how to solve this, any guess?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.