- January 4, 2018
- Posted by: Bharat Patel
- Category: Uncategorized
It may sounds little unusual to say that "Google map is not working or loading in jQuery UI tabs", Google map works nicely when you put DOM on the first tab but it won’t work in any other tabs.
Guess, there is nothing unusual to say about Google Map & jQuery UI as both are strongest stack work the best together for location services and those are really unmatched. So here let us diagnose the problems and going over the solution.
Recently, I was working on my one of the project and there was a need to show Google map inside jQuery tabs as I have so many contents to show on a single page. Initially, I thought it seems very simple to put Google map inside jQuery tabs but it won’t. See, below code that I wrote initially.
Note: Please replace text "YOUR-JAVASCRIPT-MAP-API-KEY" with your Google map key.
Error when loading gists from https://gist.github.com/.
I hope you catch my problem. The browser doesn’t show me an error so I go to google and found many different ways to show map. Actually, the map was not initialized & resize properly in a tab. When you resize the browser, it works properly but this is not a proper solution. The map needs to be resized & centered in its original position whenever the tab is activated.
Error when loading gists from https://gist.github.com/.
Here is the full example of a solution.
Error when loading gists from https://gist.github.com/.