Google Maps in a tabbed profile

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.

About these ads

About mcloide

Making things simpler, just check: http://www.mcloide.com View all posts by mcloide

10 responses to “Google Maps in a tabbed profile

  • fabrik

    we had the same problem and this one solved our 2 days headache! :)

    very nice, thanks!

  • mcloide

    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

  • Shoaib

    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

  • Shoaib

    Sorry the above code is converted automaticall into html. here is code

    (

    Latitude

    Longitude

    )

    shoaib

  • Shoaib

    div align=”center” id=”map” style=”width: 600px; height: 300px”

    Shoaib

  • mcloide

    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.

  • mcloide

    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

  • Problems with Google Maps API v3 + jQuery UI Tabs | appsgoogleplus.com

    [...] 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 [...]

  • Problems with Google Maps API v3 + jQuery UI Tabs - Tech Forum Network

    […] 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 […]

  • Problems with Google Maps API v3 + jQuery UI Tabs | Ask Programming & Technology

    […] 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 […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 293 other followers

%d bloggers like this: