Home › Forums › Front-end Issues › 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
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?
The topic ‘Multiple Google Maps on one page’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.