Ok I have a sliding panel on my website (http://www.security-vacancies.net/index.php) when the link view map is pressed the sliding panel opens to show a Google map.
The problem i have is that the CSS map element has the following
Display: none
With this in place when the web page loads the panel is closed and when i open the sliding panel the map doesn’t show correctly and shows just a little segment. Now i have read some other threads on this website that explained that the map doesn’t show because display says none.
When i remove the display element the the map shows perfectly, but when the page loads the sliding panel is in the open position. I have tried several different things to find a solution but i am having no luck and wondered if anybody knew how i could resolve this problem.
Thanks
I have encountered this problem many times. It loads the map in this way because you initiate it while it has “display: none;” and gmap initiates with canvas size 0:0.
There are two ways to solve it:
1) Load the map with the website (do not use “display: none;” on load) and onready() simulate the click on a trigger (“View Job Map”) which hides the map. It will be visually visible that the map loads and then hides.
2) Do not initiate the map on load. Initiate your map after you click “View Job Map” for the first time. Remember to save somewhere that the map is initiated and check it afterwards to avoid initiating every time you trigger “View Job Map”.