PDA

View Full Version : Tab Content Script & Google Maps



cankt
07-20-2005, 04:38 PM
I don't speak English very well (I think)

I have a Tab Content Script in my page, I want to put a Google map in the script, but it doesn't work correctly, I only see a small part of the map. If I click to center the map, it moves the center to the left-top corner.

I'm working on it, but I don't know if is possible to get the tab script with google maps.

Can anyone help me? It is possible to have a google map in the tab content script?

jscheuer1
07-21-2005, 04:30 AM
whatever
.

cankt
07-21-2005, 06:27 AM
Tab Content Script
http://80.59.94.8/kaleidos_mapa/

The map is in the tab called "MAPA"

jscheuer1
07-21-2005, 10:36 AM
When I clicked on your link, this alert box popped up:

Maps API key used on this web site was registered for a different web site.
You can generate a new key for this web site at http://www.google.com/apis/maps/and no map would display. So, I am still in the dark as to what might be causing the trouble. Please supply a link to the page that demonstrates the problem you describe. And:

whatever

cankt
07-21-2005, 10:55 AM
Sorry, it's a problem with the google maps key

From here, I have a LAN IP, that's the problem

It should work now, please tell me any problem

jscheuer1
07-21-2005, 11:30 AM
Well, when I save the page locally, to work on it, the same thing happens. I did notice that the code for mapa is an entire page. This kind of content should be displayed in an iframe and/or on a separate page. Try making mapa a separate page called mapa.htm. Then on your current page put an iframe:

<iframe src="mapa.htm" height="600" width="700" scrolling="auto" frameborder="0"></iframe>in place of the mapa code. See how that works.

cankt
07-21-2005, 12:51 PM
It doesn`t work, please see the same page

http://80.59.94.8/kaleidos_mapa/

It's very strange, if I put the map outside the tab script, markers don't work (press a point in the map to see markers)

jscheuer1
07-21-2005, 05:59 PM
When I view the:

http://80.59.94.8/kaleidos_mapa/form/mapa.php

It works fine in IE6 and FF. Also, if I refresh the iframe while viewing it on:

http://80.59.94.8/kaleidos_mapa/

it works fine then too. I'd try this:

<iframe name="mapaFrame" src="blank.htm" height="600" width="700" scrolling="auto" frameborder="0"></iframe>For that you will need a file called blank.htm:

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>Then where you click to see the map, where it has this:

onClick="return expandcontent('sc9', this)"Make it like this:

onclick="return false" onmousedown="return expandcontent('sc9', this)" onmouseup="mapaFrame.location.replace('form/mapa.php')"

jimboble
01-05-2007, 08:57 AM
I've had a similar problem and from what I have been able to find the problem is that the .tabcontent css of display: none; conflicts with google maps as it tries to build the map in a none existant space it would work with visibility:hidden; but the kind of defeats the purpose of tabs. So far I haven't been able to find a solution however, if anyone knows of one please share!
Many thanks.

jscheuer1
01-05-2007, 06:42 PM
I've had a similar problem and from what I have been able to find the problem is that the .tabcontent css of display: none; conflicts with google maps as it tries to build the map in a none existant space it would work with visibility:hidden; but the kind of defeats the purpose of tabs. So far I haven't been able to find a solution however, if anyone knows of one please share!
Many thanks.

Well, if you are already working with it at that level of difficulty script-wise, there is a method often used to overcome the layout space required by visibility:hidden;. The way this goes is to also set the position of the hidden element to absolute and set its top and left values to like -30000px (that's minus). Then when you want it back, set its visibility to visible and either change its position to static or position it as desired with its top and left values.

Notes: Elements with position:absolute take up no layout space but have dimensions. So, if you want the layout space back switch to static positioning or create a relatively positioned wrapper with the desired dimensions.

It is possible that this will not work for combining these scripts but, if you try it out and have problems, let us know. Doing what I propose can be tricky, you may just need some help or, as I say, it might not be possible.

mporter
10-17-2009, 01:02 PM
Well, if you are already working with it at that level of difficulty script-wise, there is a method often used to overcome the layout space required by visibility:hidden;. The way this goes is to also set the position of the hidden element to absolute and set its top and left values to like -30000px (that's minus). Then when you want it back, set its visibility to visible and either change its position to static or position it as desired with its top and left values.

Notes: Elements with position:absolute take up no layout space but have dimensions. So, if you want the layout space back switch to static positioning or create a relatively positioned wrapper with the desired dimensions.

It is possible that this will not work for combining these scripts but, if you try it out and have problems, let us know. Doing what I propose can be tricky, you may just need some help or, as I say, it might not be possible.

Just came across this very problem too - google map wouldn't show properly inside tabcontent.

This does seem to work (I hope!) :

Inside tabcontent.js, change the line...


subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none"

... to...


subcontent.className = (subcontent.id==subcontentid)? "tabcontent" : "hidden"


Then just add a class called hidden in the css (instead of display: none)


.hidden {
visibility: hidden;
position: absolute;
top: -30000px;
left: -30000px;
}

and change the tabcontent class to...


.tabcontent {
visibility: visible;
position: static;
}

Thanks!