View Full Version : Jquery Breaks Google Maps API

01-03-2012, 06:15 PM
I have been using the Google Maps API successfully for a few years. Now I am creating a page re-design where the page contains a series of tabs which are controlled by jquery. I have tried to put a Google Maps page in one of the tabs and it completely fails to function.

The jquery stuff was very kindly provided on this forum by jscheur1, and it works perfectly in every other respect. A single tab containing a separate file is called by:

<div id='location' style="display:none;">
<script type="text/javascript">
$('#locationarea').load('location.php', 'hid=' + hid);
<div id="locationarea"></div>

location.php contains the Google Map. Inside the main tabbed page in just comes up blank. When called as a separate file from the browser address bar it works perfectly.

Surely jquery and Google Maps cannot be totally incompatible?!!!

01-04-2012, 12:18 AM
Here's a guess based on what you described:
I don't think it's a problem with jQuery and Google Maps. Instead, the problem is that you aren't loading the map when the page loads. It's hidden. Then when you do load it, the map hasn't been loaded because it wasn't active.
I'm not sure what the best solution is for this, but you would either need to trick the browser into believing that the map is active, or just start the page with the map active.