Map did not load in Jquery tabs

[sehrish-iftikhar]

I am using tabs based html structure.I am using this plugin in second tab.Map didn't load completely.I call the map init function on tab click event and it load map completely on first click.When i re-switch tabs it again loaded partially.

I tried many solution and also resize map
google.maps.event.trigger(map_object, "resize");

but no success.Please help me how to properly insert map resize or any other solution.

Thanks,

[abhishekdgeek]

Any luck here? I am facing the same issue. Just that I am having 3 page long form and maps only work on first page.

For me the map just have a grey color box with no map itself.

Thanks,
Abhishek Jain

[sehrish-iftikhar]

Yes, it is resolved. It's map resizing issue. The Map is not loaded in jQuery tabs due to height parameter issue. You need to load the map on tab click event.

I am sharing the sample code. It initializes the map when location tab is clicked.

$(document).ready(function () {
$("#location-tab").on("click", function () {
(new GMapsLatLonPicker()).init($(this));
});
});

Let me know if you need any further assistance.

Thanks,

[abhishekdgeek]

Thanks. :)