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

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.
PLEASE: Include the URL to your problematic webpage that you want help with.

**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:

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

**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:

HTML Code:

<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:

HTML Code:

<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 Code:

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

</body>
</html>

Then where you click to see the map, where it has this:

Code:

onClick="return expandcontent('sc9', this)"

Make it like this:

Code:

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

Originally Posted by jimboble

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.

Thread: Tab Content Script & Google Maps

Thread Tools

Search Thread

Tab Content Script & Google Maps

Apparently its the css

Bookmarks

Bookmarks

Posting Permissions