Bootstrap-tabs gmap issue


#1

This was perplexing me for ages. But seemingly, if gmap is loaded in say tab 2 ( non ajax ) then because the div was hidden, the map doesnt load correctly / fully.

Does anyone know of a fix ?

Alternatively I could fire ajax requests off tab 2 and tab 3 but tab 1 is in page content and non ajax. The only fixes I have seen thus far are to make all tabs ajaxified, or none !

The other issue, being that if I use ajax, for fetching the map, on say TAB 2, then if i click tab 2, then tab 3 then tab 2 as far as i can see it, it sends a 2nd ping to google, for the map data meaning we will be running to many needless requests.

So the best option seems to be to NOT use ajax, but somehow fire the set size for the map when the tab is clicked.

Does that make sense ?

Anyone got any suggestions ?


#2

You can can hide your tabs using position: absolute; left: -9999px; instead of display: none;


#3

Had the same issue with one of my plugins. I calling this if the tab is clicked:

google.maps.event.trigger(map, 'resize');

‘map’ is your current map object of course

Hope that helps!


#4

Worked perfect thanks.


#5

Ok, I admit defeat with gmaps ( esp streetview lol )

fiddle: http://jsfiddle.net/B4zLe/158/

Any suggestions on getting streetview to work appreciated.


#6
Australia said

Any suggestions on getting streetview to work appreciated.

i tried and couldn’t even get streetview displaying in its own div on its own without the tabs. start there.


#7
dtbaker said
Australia said

Any suggestions on getting streetview to work appreciated.

i tried and couldn’t even get streetview displaying in its own div on its own without the tabs. start there.

Yup, same here lol. I will fix it, I have the technology I just aint found it yet :wink:


#8

Ok this is really doing my head in now.

Updated fiddle here > http://jsfiddle.net/B4zLe/166/

Still cannot get the streetview to display Argghhh


#9

can you get it working without a map and without tabs?

just the street view on its own with nothing else on the page?


#10

Yep

http://www.422.com.au/test/streetview.html

Its something to do with loading the streetview AFTER the tabs have initated because of reset size, if you look at the fiddle, you will notice how we accomplish this for the MAP


#11

Sweet, I was struggling with that part, here ya go:

http://jsfiddle.net/B4zLe/167/

:slight_smile:

(one of the things that helped was removing “fade” class, if you want to keep “fade” between tab change then you will probably have to do a setTimeout() to initialize the pano after the fade animation has completed.


#12

Still doesnt work for me.

Using Mac > Firefox, I just get greyed out background for the streetmap with the icons. But no street view :frowning: Cheers for persevering tho


#13

wtf … it works fine on iPad !


#14

Nup, doesnt work. The resize function you changed, affects the map. If you try with lat and lng like:

-27.625275, 153.300778

Use the above Lat , Lng for map and streetview.

Which is some place in Redland Bay the streetview ( will not display actual streetview but shows correct address ) but on the gmap which does display, it displays somewhere off the east coast of Australia.

< gonna have to rethink this.

KK Lets see how clever my Son is, I have succumbed and asked him ! Will post back if I get a fix :wink:


#15

Fixed: My son is a smart arse.

Demo: here

Now to make the streetmap auto rotate with checkbox to stop it. :wink:


#16

Okies so now onto the next phase.

I now have streetview animation.

http://www.422.com.au/test/streetview.html

I need to add a checkbox now to stop/start animation. Feel free to picth in.

Code thus far:



<?=$r['latitude'];?>, <?=$r['longitude'];?>

This is just arbirtrary lat and lng pulled from our db