Consider that you have a profile page, tabbed, and in one of the tabs you have a Google Map with the pinpoint of the user. When the page loads, it will load the map aplication, but the map div will not be visible at that point.
When you hit the map tab, you will see the map loaded, but, with some areas missing or acting really weird.
What is happening is when the tab loads, the map is not fully loaded and the main document finishs to load before the map loads, so, it understands that the map area is smaller than really is and shows it like that, funny.
How to fix it? Simplier than you think. If you search around you are going to find some stuff like map force redraw, but there’s a simplier way to do it.
Add a setTimeout to load the map.
Here’s the whole process. Remove the onLoad=”loadThis()” from the body and inside the map tab, just after the map div, put the a javascript like this: setTimeout(‘loadThis()’,1000);
That’s all you need and your map will have more than enought time to load all info and display correctly.
Have fun.
Amazon MP3 Store
PHP Libraries, API's and Frameworks 
October 13th, 2008 at 8:59 AM
we had the same problem and this one solved our 2 days headache! 🙂
very nice, thanks!
October 13th, 2008 at 9:18 AM
Hey Fabrik,
Good to know that it helped :D. Latter put the link of your application here so we can see how it became….
Have fun
November 20th, 2008 at 11:24 PM
Hi all,
Can any one give me some sample code. I have same problem and here is code
Latitude
Longitude
Now in above code where to put setTimeOut(‘loadthis()’,1000)
Kindly help me to solve this problem.
Thanks
Shoaib
November 20th, 2008 at 11:26 PM
Sorry the above code is converted automaticall into html. here is code
(
Latitude
Longitude
)
shoaib
November 20th, 2008 at 11:28 PM
div align=”center” id=”map” style=”width: 600px; height: 300px”
Shoaib
November 21st, 2008 at 10:09 AM
Shoaib, in the page that you be loading the tab just after the map div you will place the set timeout function.
Check your the way that you are entering the setTimeout function name, because javascript is case sensitive and it might not be working – http://www.w3schools.com/js/js_timing.asp
Anyway,
This is how my working code is set:
profile.php page – have all the map functions, load map, etc
map.php page – is the tabbed map page and, among other html, I have this:
<input type=”hidden” value=”” name=”uLatitude” id=”uLatitude” />
<input type=”hidden” value=”” name=”uLongitude” id=”uLongitude” />
setTimeout(‘loadThis();’,1000);
Just as a note, the setTimeout function is being used because at the moment that the tab is loaded, the loadThis function will try to find the map div and since the page is not fully rendered, it will not. The setTimeout will give enough time to the page finish to render and then will call the loadThis function.
This will work with this example, because the tabs are being built using AJAX calls (JQuery). At the moment that the user clicks on the tab (profile.php), it will include, via AJAX, the tabbed page (map.php).
If your tab system uses page post or get passing variables to include a page with PHP, then, place all (that is necessary) javascript and Google map script functions at the bottom of the page and it might work as well.
Good luck.
November 21st, 2008 at 10:12 AM
Ps. I have just noticed that the div elements were scraped, so, this is how it should be displayed:
div style=”margin-top:5px;”
input type=”hidden” value=”php echo $uLatitude ” name=”uLatitude” id=”uLatitude” /
input type=”hidden” value=”php echo $uLongitude ” name=”uLongitude” id=”uLongitude” /
/* The inputs are controls – don’t have to use them if don’t need them. */
div id=”map” style=”width:100%; height:500px;” /div
script type=”text/javascript” setTimeout(‘loadThis();’,1000); /script
/div
January 18th, 2012 at 3:34 PM
[…] there only seem to work for v2 of the Maps API. Other references I checked out are here and here, along with pretty much everything I could dig up through […]
May 28th, 2013 at 6:58 PM
[…] there only seem to work for v2 of the Maps API. Other references I checked out are here and here, along with pretty much everything I could dig up through […]
November 1st, 2013 at 4:00 AM
[…] there only seem to work for v2 of the Maps API. Other references I checked out are here and here, along with pretty much everything I could dig up through […]